Chrome谷歌浏览器插件编写简单入门

397 阅读1分钟

作为开发者日常工作等等都大量接触过各种Chrome插件,今天带大家了解一下如何编写自己的Chrome插件。

manifest.json

这是Chrome插件最核心的一个文件,用来存储各种配置的。

{
  "manifest_version": 2,
  "name": "my_first_extension",
  "version": "0.1.0"
}

必填参数只有三个,一般常用参数包括以下

  "default_locale": "zh_CN",  // 默认语言
  "description": "A plain text description",  // 描述
  "icons": {...}, // 图标,可以放入不同尺寸的logo,不过一般放入一个即可

hello world

一个简单的插件,manifest.json加上一个js文件即可

index.js

alert('hello world')

manifest.json

{
  "name": "第一个Chrome插件",
  "manifest_version": 1,
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "https://www.baidu.com/"
      ],
      "js": [
        "index.js"
      ]
    }
  ]
}

content-scripts是注入脚本的一种形式,matches表示匹配网址,js则可以同时加载多个,按照数组顺序注入

加载到Chrome

以上简单的步骤即可完成一个简单的Chrome插件。

加载方式:右上角菜单->更多工具->扩展程序就可以进入,也可以直接在地址栏输入 chrome://extensions 访问。

这里有一点需要注意的是,必须 勾选开发者模式 才可以文件夹的方式加载插件,否则只能加载.crx的插件。

效果如下

更多api 可以查看官方文档:developer.chrome.com/extensions