如何在 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