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

Question

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

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

但这对我不起作用.

注意我试图避免使用jQuery.

Answer 1

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

内容脚本可用于运行匹配某些网址的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注入到与模式匹配的每个页面时,可以使用编程注入.

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

的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";