如何访问网页DOM而不是扩展页面DOM？

Question 1

我正在编写Chrome扩展程序，并尝试覆盖 <div>在popup.html文件中单击按钮后立即将a在当前网页上。

当我document.body.insertBefore从popup.html中访问该方法时，它将覆盖<div>弹出窗口，而不是当前网页。

为了访问网页的DOM，是否必须在background.html和popup.html之间使用消息传递？我想在popup.html中做所有事情，并尽可能使用jQuery。

Question 2

扩展页/脚本，如browser_action弹出窗口或后台脚本有自己的DOM，，document，window和chrome-extension://URL（使用devtools该部分扩展到检查它的）。

您需要一个内容脚本来访问网页的DOM并与选项卡的内容进行交互。内容脚本将在选项卡中作为该页面的一部分而不是扩展的一部分执行。

方法1。声明式

manifest.json：

"content_scripts": [{
  "matches": ["*://*.example.com/*"],
  "js": ["contentScript.js"]
}],

页面加载后它将运行一次。在发生这种情况之后，请使用消息传递，但请注意，它无法发送DOM元素，Map，Set，ArrayBuffer，类，函数等-它只能发送与JSON兼容的简单对象和类型，因此您需要手动提取所需的数据，并将其作为简单的数组或对象传递。

方法2。编程

用于chrome.tabs.executeScript按需注入内容脚本。

此方法的回调接收内容脚本中最后一个表达式的结果，因此可用于提取必须与JSON兼容的数据，请参见上面的方法1注释。

manifest.json中的必需权限：

最佳情况："activeTab"适用于响应用户操作（通常单击工具栏中的扩展图标）。安装扩展程序时不显示权限警告。
通常："*://*.example.com/"加上您想要的任何其他网站。
最坏的情况："<all_urls>"或者"*://*/"，"http://*/"，"https://*/"-提交到Chrome网上应用店时，所有的这些把你的扩展在超慢的审批队列中，因为广泛的主机的权限。

作为第二种方法的示例，让我们在单击浏览器操作时添加该div。如果点击文件很小，我们将chrome.tabs.executeScript()在browserAction点击处理程序中使用它来将内容脚本作为文件或文字代码字符串注入。

简单的电话：

chrome.tabs.executeScript({ code: `(${ inContent })()` });
function inContent() {
  const el = document.body.appendChild(document.createElement('div'));
  el.style.cssText = 'position:fixed; top:0; left:0; right:0; background:red';
  el.textContent = 'DIV';
}

使用参数调用并接收响应：

chrome.tabs.executeScript({
  code: `(${ inContent })(${ JSON.stringify({ foo: 'bar' }) })`
}, ([result] = []) => {
  if (!chrome.runtime.lastError) {
    console.log(result); // shown in devtools of the popup window
  }
});
function inContent(params) {
  document.body.insertAdjacentHTML('beforeend',
    `<div style="
      all:unset;
      position:fixed;
      top:0; left:0; right:0; bottom:0;
      background-color:rgba(0,255,0,0.3)"
    >${params.foo}</div>`);
  return {
    success: true,
    html: document.body.innerHTML,
  };
}

此示例使用inContent函数代码的自动转换为字符串，这的好处是IDE可以应用语法高亮和显示。明显的缺点是浏览器浪费了解析代码的时间，但是通常不到1毫秒，因此可以忽略不计。