manifest.json

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

如果您的扩展程序需要与网页交互，则需要内容脚本。内容脚本是一些JavaScript，它们在已加载到浏览器的页面的上下文中执行。将内容脚本视为该加载页面的一部分，而不是与其打包在一起的扩展名（其父扩展名）的一部分。

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

Answer 2

确实要使用内容脚本。我尝试了一下，但是对我来说不起作用，但是this answer解决了所有问题。

只需链接它，因为它比我能更好地解释一切：）

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

manifest.json

popup / index.html

popup / app.js

2 个答案: