5分钟入门chrome插件开发

功能

实现修改百度首页字体颜色。

实现

1. 新建一个叫plugin-demo的文件夹，目录结构如下：

plugin-demo  
├── manifest.json
├── index.js

2.创建 manifest.json 配置文件

{  
  "name": "Baidu Color Changer",  
  "version": "1.0",  
  "manifest_version": 2,  
  "description": "百度首页颜色变色器", 
  "content_scripts": [  
    {  
      "matches": ["https://www.baidu.com/*"],  
      "js": ["index.js"],  
      "run_at": "document_start"
    }  
  ]  
}

3.创建 index.js 文件

document.addEventListener('DOMContentLoaded', (event) => {
  console.log('start')
  const elements = document.querySelectorAll('.mnav');  
  elements.forEach((element) => {  
    element.style.color = 'red';  
  });  
});

4.打开chrome浏览器，加载插件

打开网址chrome://extensions/， 点击开发者模式，加载已解压的拓展程序，加载plugin_demo。然后打开www.baidu.com 就能看到字体颜色变化了。