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

Question

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

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

但这对我不起作用。

注意我尽量避免使用 jQuery。

Answer 1

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

Content Scripts 可用于运行匹配某些 url 的 js/css。

ma​​nifest.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
}

content-script.js

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

上面将为所有匹配http://*/*的url执行content-script.js，其中*是一个通配符。所以基本上所有http 页面。

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

Programmatic injection 可以在不应该将 js/css 注入到每个匹配模式的页面中时使用。

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

ma​​nifest.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
}

background.js

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

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

background.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";