javascript - 如何插入带有 chrome 扩展名的 HTML？

Question

我有一个上下文菜单选项，当它被选中时，我想插入一些 HTML。我试过这样做

var div=document.createElement("div");
document.body.appendChild(div);
div.innerText='test123';

但这对我不起作用。

注意我试图避免使用 jQuery。

Answer 1

在这里，您可以研究如何创建扩展并下载示例 manifest.json。

内容脚本可用于运行匹配某些 url 的 js/css。

清单.json

{
  "name": "Append Test Text",
  "description": "Add test123 to body",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["content-script.js"]
    }
  ],
  "browser_action": {
    "default_title": "Append Test Text"
  },
  "manifest_version": 2
}

内容脚本.js

var div=document.createElement("div"); 
document.body.appendChild(div); 
div.innerText="test123";

上面将执行content-script.js匹配通配符http://*/*的所有 url。*所以基本上所有http的页面。

内容脚本有许多属性，可以在上面的链接中找到。

当不应将 js/css 注入到与该模式匹配的每个页面中时，可以使用程序化注入。

下面展示了如何执行onclick扩展图标的js：-

清单.json

{
  "name": "Append Test Text",
  "description": "Add test123 to body",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Append Test Text"
  },
  "manifest_version": 1
}

背景.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
  });
});

这使用了executeScript方法，该方法还可以选择调用单独的文件，如下所示：-

背景.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    file: "insert.js"
  });
});

插入.js

var div=document.createElement("div"); 
document.body.appendChild(div); 
div.innerText="test123";