0

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

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

该文件使页面看起来像网站在视网膜上显示时的样子。有没有简单的方法可以做到这一点？

4

2 回答 2

3

启用扩展后，您可以使用此基本结构将 JavaScript 文件添加到所有站点。

方法一

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

优势：

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

退后

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

示范

清单.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"],
}
]
}

方法二

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

优势：

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

退后

它不能使用 chrome API*。

示范

清单.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

方法三

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

示范

背景.html

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

清单.json

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

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

参考

于 2013-01-05T06:14:16.860 回答
1

查看Tampermonkey。它是相当于greasemonkey的铬。

于 2013-01-04T22:02:12.647 回答