如何使用Chrome扩展插入HTML？ [英] How to insert HTML with a chrome extension?

问题描述

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

  var div = document.createElement（div）; 
 document.body.appendChild（div）; 
 div.innerText ='test123'; 
  

但它不适合我。

注意我试图避免使用jQuery。 /developer.chrome.com/extensions/getstarted\">这里您可以研究如何创建扩展并下载样本manifest.json。

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

manifest.json

  {
name ：添加测试文本，
description：将test123添加到body，
version：1.0，
permissions：[
activeTab 
，
content_scripts：[
 {
matches：[http：// * / *]，
js：[ content-script.js] 
} 
]，
browser_action：{
default_title：附加测试文本
}，
 manifest_version：2 
} 
  

content-script.js

  var div = document.createElement（div）; 
 document.body.appendChild（div）; 
 div.innerText =test123; 
  

以上将执行 content-script.js http：// * / * 的地址，其中 * 是通配符。所以基本上所有的 http 页面。

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

程序化注入 可以

下面显示了如何执行js onclick 的扩展图标： -
$ b $ p manifest.json

<$ p
name：追加测试文本，
description：将test123添加到body，
version：1.0 ，
permissions：[
activeTab
]，
background：{
scripts：[background.js]，
persistent：false
}，
browser_action：{
default_title：追加测试文本
}，
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; 
  

I have a context menu option and when it is selected I want insert some HTML. I have tried doing this

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

But it's not working for me.

Note I am trying to avoid using jQuery.

解决方案

Here you can research how to create an extension and download the sample manifest.json.

Content Scripts can be used to run js/css matching certain urls.

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
}

content-script.js

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

The above will execute the content-script.js for all urls matching http://*/* where * is a wildcard. so basically all http pages.

Content scripts have many properties which can be found in the link above.

Programmatic injection can be used when js/css shouldn't be injected into every page that matches the pattern.

Below shows how to execute the js onclick of the extension icon:-

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";'
  });
});

This uses the executeScript method, which also has an option to call a separate file like so:-

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

这篇关于如何使用Chrome扩展插入HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！