使用 Chrome 扩展程序时从弹出窗口获取 document.body 的网页

Question

我有一个基本的 Chrome 扩展，需要通过弹出窗口访问网页 document.body。

目前，当我尝试打开弹出窗口和控制台日志 document.body 时，它会记录弹出窗口的 document.body 而我想要网站的 document.body.

我该怎么做？

manifest.json

{
  "description": "Demo ext",
  "manifest_version": 2,
  "name": "Demo ext",
  "version": "1.0",
  "icons": {
    "48": "icons/icon-48.png"
  },
  "permissions": ["activeTab"],
  "browser_action": {
    "default_icon": "icons/icon-32.png",
    "theme_icons": [
      {
        "light": "icons/icon-32-light.png",
        "dark": "icons/icon-32.png",
        "size": 32
      }
    ],
    "default_title": "Demo ext",
    "default_popup": "popup/index.html"
  }
}

popup/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo ext</title>
  </head>
  <body>
    <h1>Title should be the websites which we are on </h1>
    <script src="./app.js"></script>
  </body>
</html>

popup/app.js

function main() {
  console.log(document.body)
  var title = document.createElement('div')
  title.innerHTML = document.title
  document.body.appendChild(title)
}

main()

我希望此处登录的 document.body 属于该网站。我应该怎么做？

Answer 1

我建议您查看此 Chrome Extension Content Scripts

If your extension needs to interact with web pages, then it needs a content script. A content script is some JavaScript that executes in the context of a page that's been loaded into the browser. Think of a content script as part of that loaded page, not as part of the extension it was packaged with (its parent extension).

内容脚本可以通过与扩展交换消息来访问 Chrome 其父扩展使用的 API。他们还可以使用 chrome.runtime.getURL() 访问扩展文件的 URL，并使用与其他 URLs 相同的结果。

Answer 2

的确，内容脚本是必经之路。我试过了，但它对我不起作用，但 this answer 解决了所有问题。

只是链接它，因为它比我能更好地解释一切:)

Answer 3

在您的 popup.js 中，您可以使用 chrome.scripting.executeScript 执行脚本与内容交互，如下所示：

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

// The body of this function will be executed as a content script inside the
// current page
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  });
}

使用 Chrome 扩展程序时从弹出窗口获取 document.body 的网页

Get document.body of webpage from popup while using Chrome extension

javascript

firefox-addon

google-chrome-extension

google-chrome-devtools

manifest.json

popup/index.html

popup/app.js