如何开发一个Chrome插件？

前端小郭
341 阅读5分钟

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

通过chrome插件可以做什么？

  • 书签控制；
  • 下载控制；
  • 窗口控制；
  • 标签控制；
  • 网络请求控制，各类事件监听；
  • 自定义原生菜单；
  • 完善的通信机制；
  • 等等；

开发一个简单的Hello world

创建一个文件，文件名字随便，建议英文，然后创建一个manifest.json文件，切记这个为核心，然后写入基本的配置

{
  "name": "component",
  "manifest_version": 2,
  "version": "1.0",
  "description": "component",
  "browser_action": {
    "default_icon": "img/favicon.png"  //这个是你的插件图标。
  },
  "omnibox": {
    "keyword": "aString"
  },
  "content_scripts": [
    {
      "matches": [
        "https://ch.one-line.com/*"   //这个是你需要在那个页面显示Hello word
      ],
      "js": [
        "script.js"    //这个是需要载入的js文件，可以在这个文件里面书写你需要的逻辑，我们只写Hello word
      ]
    }
  ]
}

其次创建一个js文件，我创建的是script.js文件。然后在script.js文件里面写入

window.onload = function () {
    
    alert('Hello world')
    
}

怎么去写一个chrome插件，并且执行你这个插件呢？

从右上角菜单->更多工具->扩展程序可以进入 插件管理页面，也可以直接在地址栏输入 chrome://extensions 访问。

勾选开发者模式即可以文件夹的形式直接加载插件，

image.png

点击右上角加载已解压扩展程序，将自己刚才的文件加载进来。

开发中，代码有任何改动都必须重新加载插件，只需要在插件管理页按下Ctrl+R即可，以防万一最好还把页面刷新一下。

然后打开刚才需要显示Hello word的网页，页面就会弹出Hello word。

当然我们写了一个插件不可能只做这一点事情，可以去做很多事情的，接下来，我们尝试着去请求这个网页中的某个接口。。。

使用插件请求网页接口

我们打开需要请求网页的控制台，看一下，人家网络的请求是一个什么样子的 ，需要分析一下能否拿到请求参数。

image.png 我们看到这个页面有两个输入框，尝试输入找到对应的接口

image.png 输入YAN就在控制台看到了如上图所示的接口，然后我开始在script.js文件里面开始写一个请求

let tokenData = JSON.parse(window.sessionStorage.getItem('ember_simple_auth-session')) //亲求需要token验证，所以我们需要拿到token.
let ajax = new XMLHttpRequest();
ajax.open('get', `https://cetusapi-prod.kontainers.io/trip-ui/api/v1/customer/locations?from=&fromCountry=&loadType=fcl&query=YAN`); //这个地方就是我们需要的接口。
ajax.setRequestHeader("token", tokenData.authenticated.token);  //加入我们获取到的token验证。
ajax.send();
ajax.onreadystatechange = function () {
    if (ajax.readyState === 4 && ajax.status === 200) {
       console.log(JSON.parse(ajax.responseText) )  // 这个就是我门获取到的信息。
    }
}

这个就是我门拿到的结果。

image.png 然后到这一步就完了。有兴趣的小伙伴可以在深入研究一下 ，至于想做什么，自己研究哈。

最后附上一些关键的配置哦

{
  // 清单文件的版本，这个必须写，而且必须是2
  "manifest_version": 2,
  // 插件的名称
  "name": "demo",
  // 插件的版本
  "version": "1.0.0",
  // 插件描述
  "description": "简单的Chrome扩展demo",
  // 图标，一般偷懒全部用一个尺寸的也没问题
  "icons": {
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  // 会一直常驻的后台JS或后台页面
  "background": {
    // 2种指定方式，如果指定JS，那么会自动生成一个背景页
    "page": "background.html"
    //"scripts": ["js/background.js"]
  },
  // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
  "browser_action": {
    "default_icon": "img/icon.png",
    // 图标悬停时的标题，可选
    "default_title": "这是一个示例Chrome插件",
    "default_popup": "popup.html"
  },
  // 当某些特定页面打开才显示的图标
  /*"page_action":
  {
      "default_icon": "img/icon.png",
      "default_title": "我是pageAction",
      "default_popup": "popup.html"
  },*/
  // 需要直接注入页面的JS
  "content_scripts": [
    {
      //"matches": ["http://*/*", "https://*/*"],
      // "<all_urls>" 表示匹配所有地址
      "matches": [
        "<all_urls>"
      ],
      // 多个JS按顺序注入
      "js": [
        "js/jquery-1.8.3.js",
        "js/content-script.js"
      ],
      // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
      "css": [
        "css/custom.css"
      ],
      // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
      "run_at": "document_start"
    },
    // 这里仅仅是为了演示content-script可以配置多个规则
    {
      "matches": [
        "*://*/*.png",
        "*://*/*.jpg",
        "*://*/*.gif",
        "*://*/*.bmp"
      ],
      "js": [
        "js/show-image-content-size.js"
      ]
    }
  ],
  // 权限申请
  "permissions": [
    "contextMenus",
    // 右键菜单
    "tabs",
    // 标签
    "notifications",
    // 通知
    "webRequest",
    // web请求
    "webRequestBlocking",
    "storage",
    // 插件本地存储
    "http://*/*",
    // 可以通过executeScript或者insertCSS访问的网站
    "https://*/*"
    // 可以通过executeScript或者insertCSS访问的网站
  ],
  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
  "web_accessible_resources": [
    "js/inject.js"
  ],
  // 插件主页，这个很重要，不要浪费了这个免费广告位
  "homepage_url": "https://www.baidu.com",
  // 覆盖浏览器默认页面
  "chrome_url_overrides": {
    // 覆盖浏览器默认的新标签页
    "newtab": "newtab.html"
  },
  // Chrome40以前的插件配置页写法
  "options_page": "options.html",
  // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
  "options_ui": {
    "page": "options.html",
    // 添加一些默认的样式，推荐使用
    "chrome_style": true
  },
  // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
  "omnibox": {
    "keyword": "go"
  },
  // 默认语言
  "default_locale": "zh_CN",
  // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
  "devtools_page": "devtools.html"
}
avatar
文章
阅读
粉丝