首页
前端开发
Javascript
Chrome插件示例JavaScript注入扩展

Chrome插件示例JavaScript注入扩展

0 次浏览 0 条评论
zip
zip

向网页里注入 JavaScript 的 Chrome 插件写法，挺适合做交互增强、小功能实验那类需求。比如想在访问某个页面时自动填充表单、屏蔽弹窗，或者插个调试用的按钮，这种插件就好用。结构不复杂，主要靠manifest.json去声明权限、注入脚本。

核心思路是写好 JS 逻辑，通过content_scripts字段把它挂到页面上。比如下面这段，把一个提示语注入到网页顶部：

{
  "content_scripts": [
    {
      "matches": [""],
      "js": ["inject.js"]
    }
  ]
}

配套的inject.js可以像这样写：

const tip = document.createElement('div');
tip.innerText = 'Hello from extension!';
tip.style.cssText = 'position: fixed; top: 0; background: #222; color: #fff; padding: 10px; z-index: 9999';
document.body.appendChild(tip);

你会发现，效果立竿见影，响应也快，调试也方便。还可以配合Postman 插件（Chrome 插件 Postman 网页调试工具下载）做接口联调，效率提高不少。

如果你在做移动端适配，也可以试试这个插件：R-page 插件，跟这个 JS 注入搭配使用，移动端调试更方便。

建议你本地开发时先用“加载已解压的扩展程序”方式跑通流程，调完再打包。要注意权限声明别太宽泛，浏览器有时候会弹权限警告，影响体验。

如果你对依赖注入感兴趣，顺带看看这篇文章，会对理解插件和 JS 模块化注入有些。

，做前端的你，掌握个 Chrome 插件写法挺有用，尤其调试和临时修改网页结构的时候，省时省力。

zip 文件大小：35.74KB