详情介绍
1. 编写基础脚本文件:在扩展程序的文件夹中,创建`content.js`文件,写入需要执行的JavaScript代码。例如,添加`document.body.style.backgroundColor = 'yellow';`以改变页面背景颜色。此文件需通过manifest注册才能生效。
2. 配置Manifest文件:在扩展程序的根目录下找到`manifest.json`文件,确保其中包含`"content_scripts"`字段。例如:
json
{
"name": "自定义脚本扩展",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"matches": ["
"js": ["content.js"]
}
]
}
此配置会将`content.js`注入到所有网页中。
3. 限制脚本作用范围:在`manifest.json`的`content_scripts`中,将`"matches"`改为具体网址。例如`"matches": ["*://example.com/*"]`,仅对指定域名生效,避免干扰其他网站。
4. 通过按钮动态注入:在扩展程序的弹出页面(如`popup.`)中,添加一个按钮并绑定点击事件。使用`chrome.tabs.executeScript`方法手动注入脚本。例如:
javascript
document.getElementById('injectButton').addEventListener('click', () => {
chrome.tabs.executeScript({
file: 'dynamic.js'
});
});
此操作仅在用户点击时执行,适合需要手动触发的场景。
5. 调试与错误排查:按Ctrl+Shift+I打开扩展程序专用的调试窗口,在“Console”标签页中查看日志。若脚本未生效,检查`manifest.json`的语法是否正确,或尝试将all_urls改为具体匹配规则。