时间戳

首页 > 解决方案 > 使用 Chrome 扩展时从弹出窗口获取网页的 document.body

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

问题描述

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

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

我怎么做？

清单.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"
  }
}

弹出/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>

弹出/app.js

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

main()

我希望在document.body此处登录的是网站。我该怎么做？

标签： javascriptgoogle-chrome-extensionfirefox-addongoogle-chrome-devtools

解决方案

我建议您查看此Chrome 扩展内容脚本

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

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

推荐阅读