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

Question

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

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

但它不适合我。

注意我试图避免使用jQuery。

Answer 1

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

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

<强>的manifest.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
}

内容-的script.js

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

上述内容将针对匹配content-script.js的所有网址执行http://*/*，其中*是通配符。所以基本上都是http个页面。

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

当js / css不应该被注入到与模式匹配的每个页面时，可以使用

Programmatic injection。

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

<强>的manifest.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"
  });
});

<强> insert.js

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