将JavaScript文件添加到我浏览的所有网站

Question

我是Chrome扩展程序开发的新手，我需要使用扩展程序制作一些示例 我需要将JavaScript文件添加到我启用扩展时浏览的所有网站，这是我要添加到所有页面的代码

<script type="text/javascript" src="web-retina-emulator.js"></script> 

此文件使网页看起来像视网膜上的网站显示。 有没有简单的方法来实现这一目标？

Answer 1

您可以使用此基本结构在启用扩展程序时将JavaScript文件添加到所有网站。

方法1

如果web-retina-emulator.js是一个不使用全局变量或注入页面函数的单个文件，建议使用此方法

优势：

它可以访问chrome API *的某些部分

退回

它不能使用javascript变量和注入它的页面的函数。

示范

的manifest.json

{
"name":"Custom Script",
"description":"http://stackoverflow.com/questions/14165629/add-javascript-file-to-all-sites-i-browse",
"version":"1",
"manifest_version":2,
"content_scripts":[{
    "matches":["<all_urls>"],
    "js":["web-retina-emulator.js"],
}
]
}

方法2

如果web-retina-emulator.js需要一些javascript方法或页面变量，请使用此方法

优势：

它可以访问javascript变量和页面方法

退回

它不能使用chrome API *。

示范

的manifest.json

{
"name":"Custom Script",
"description":"http://stackoverflow.com/questions/14165629/add-javascript-file-to-all-sites-i-browse",
"version":"1",
"manifest_version":2,
"content_scripts":[{
    "matches":["<all_urls>"],
    "js":["myscript.js"],
}
]
} 

myscript.js

var script = document.createElement('script'); // Create a Script Tag
script.src = chrome.extension.getURL("web-retina-emulator.js"); //Fetch the content script
script.onload = function () {
    this.parentNode.removeChild(this); //Remove script after script executed
};
(document.head || document.documentElement).appendChild(script); //ADD script tag 
                                                       //to head or Html element

方法3

当您的JavaScript或CSS代码不应注入与模式匹配的每个页面时，以编程方式将代码插入页面非常有用 - 例如，如果您希望脚本仅在用户单击浏览器操作的图标时运行

示范

background.html

chrome.tabs.executeScript(null,
{file:"web-retina-emulator.js"});

的manifest.json

确保在清单文件中设置权限

"permissions": [
  "tabs", "http://*/*"
],

参考

• Content Scripts
• Execute Script API

Answer 2

结帐tampermonkey。它的润滑油相当于greasemonkey。