如何在 Chrome 扩展的标记后添加一些 DOM 元素？

Question

我想在网页呈现之前将一些 DOM 节点插入到网页中。 我无法控制该页面，所以我只能创建一个 chrome 扩展程序来这样做。 例如，我想在<body>标记之后插入一个<p>hello world</p> 。 据我所知，我只能在<body>之前，在<head>中插入<script> > 。 但是，当我尝试从该脚本访问<body>时，它不起作用。

我该怎么做才能实现这一目标？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test Page</title>
    <style>
        
    </style>
    <script type="text/javascript">
      var a = document.querySelector('body');
      alert(a) // null
    </script>
</head>
<body>
    <script type="text/javascript">
      var a = document.querySelector('body');
      alert(a) // [object HTMLBodyElement]
    </script>
</body>
</html>

Answer 1

您在 Chrome 扩展程序中使用的权限似乎存在问题。 为了访问当前页面，您需要有activeTab权限，并且您需要检查您是否允许扩展程序的manifest.json文件中的当前URL。 检查下面的示例文件：

{
  "name": "Your chrome extension",
  "description": "You can add anything to the body",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["content-script.js"]
    }
  ],
  "browser_action": {
    "default_title": "Append Test Text"
  },
  "manifest_version": 2
}

然后，您的 content-script.js 文件应如下所示：

var p = document.createElement("p"); 
p.innerHTML = "Hello World";
document.body.insertBefore(p);

您可以通过官方文档找到有关 Chrome 扩展的更多信息：单击此处

如何在 Chrome 扩展的标记后添加一些 DOM 元素？

问题描述

1 个解决方案

解决方案1
-1 2020-11-12 01:53:22

如何在 Chrome 扩展的标记后添加一些 DOM 元素？

问题描述

1 个解决方案

解决方案1 -1 2020-11-12 01:53:22

解决方案1
-1 2020-11-12 01:53:22