Javascript Chrome扩展-用于在任何页面上运行js的简单内容脚本

如何编写一个简单的Chrome扩展内容脚本，在每次加载页面时执行JavaScript（例如

alert（“hello”）；

因此，当我导航到页面或重新加载页面时，JavaScript应该运行

这是迄今为止我的

manifest.json

文件：

{
    "name": "Highlight some phrases",
    "description": "Hightlight some pre defined text from websql database after page loads",
    "version": "0.1",
    "permissions": [
        "tabs","<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "content_scripts": [
        {
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["content.js"]
        }
    ],

    "background": {
        "page": "background.html" 
    },

    "manifest_version": 2
}

{
“名称”：“突出显示一些短语”，
“说明”：“页面加载后，高亮显示websql数据库中的一些预定义文本”，
“版本”：“0.1”，
“权限”：[
“制表符”
],
“浏览器操作”：{
“默认图标”：“icon.png”，
“默认弹出窗口”：“popup.html”
},
“内容脚本”：[
{
“匹配项”：[
“http://*/*”，
“https://*/*”
],
“js”：[“content.js”]
}
],
“背景”：{
“页面”：“background.html”
},
“清单版本”：2
}

如果您只需在每次加载或重新加载页面时提醒

hello

，下面是一个简单的演示：

Manifest.json

：

{
    "name": "Highlight some phrases",
    "description": "Hightlight some pre defined text after page loads",
    "version": "0.1",
    "permissions": [
        "tabs","<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "content_scripts": [
        {
        "matches": [
            "http://*/*",
            "https://*/*"
            ],
        "js": ["content.js"],
        "run_at": "document_end"    // Pay attention to this line
        }
    ], 
    "manifest_version": 2
}

是的，够了。

---

当然，别忘了在这两个文件的同一个目录中添加一个名为

icon.png

的图标，然后在Google Chrome中测试它。

对不起，我的帖子。代码看起来不可靠。。这是我的第一篇文章。{“名称”：“突出显示一些短语”，“描述”：“在页面加载后突出显示websql数据库中的一些预定义文本”，“版本”：“0.1”，“权限”：[“选项卡”，“权限]，“浏览器操作”：{“默认图标”：“icon.png”，“默认弹出窗口”：“popup.html”}，“内容脚本”：[{“匹配项”：[“http://*/*/*”，“https://*/*”]，“js”：[“content.js”]}]，“background”：{“page”：“background.html”}，“manifest_version”：2}Chrome扩展可能会对我有所帮助。它允许您将自己的自定义脚本注入到您选择的特定页面中，包括依赖jQuery的页面。哇，这太神奇了。。如果我想把背景颜色改成黄色，你能帮我吗。我该怎么做呢？我已经编辑了我的答案，但它并不总是完美的，因为网站也会受到自己的js代码的影响。你真的应该看看谷歌的教程。现在我要睡觉了。（这里是凌晨1:30）@用户2876479谢谢亚强，我已经多年没有开发一些有用的chrome扩展了。但我才开始工作2-3天。我现在开始有点明白了。所以我的问题可能很愚蠢。。我想我可能需要使用一些命令，比如“chrome.extension.onRequest.addListener”。因为我也有一个弹出窗口，那么简单的样式代码会影响弹出窗口html还是选项卡的html。仍然需要了解更多关于扩展的信息。我现在一定要试试这些。并尽快在这里分享我的经验。请不要编辑您的代码。。这些对像我这样的初学者来说非常有用。。content_scripts>matches属性也支持http、https等多种模式，因此您不必为http、https等的多种模式操心。只需执行以下操作：

“matches”：[“”]，

，这也将匹配

文件：//

等内容。