Chrome扩展程序开发笔记-扩展与web页面的通讯

可参考的资料

• 官方开发文档 ：目前全英文，须要翻**墙。
• Chrome插件开发全攻略：github上star挺多的一个repo，开发前可先过一下。

搜索到的资料能够做为参考，实际开发应以官方最新文档为准。

文件结构

• manifest.json配置文件：必须，详细说明文档
• 其余JavaScript、HTML、CSS文件：根据功能和我的喜爱，进行增减以及结构调整。

开发扩展程序与WEB开发相似，主要应用的技术为JavaScript、HTML、CSS等，再根据功能，调用chrome提供的各种API。

最终的文件结构能够相似这样：

my-extension
  - manifest.json  // required
  pages
    - background.html
    - popup.html
  icons
    - logo_16.png
    - logo_48.png
    - logo_128.png
  js
    - background.js
    - content.js
    - inject.js
    - popup.js
  css
    - popup.css
复制代码

开发时为防止后续功能繁多，我使用了Vue-Cli初始化项目，并使用插件vue-cli-plugin-chrome-ext修改文件结构，再根据本身须要修改vue.config.js以修改webpack的一些配置。

web页面与扩展程序之间通讯

官方相关的文档

• 消息通讯 从web页面发送消息
• 外部链接相关 externally_connectable
• 监听事件 onMessageExternal用法

权限声明

首先，须要在manifest.json中，配置externally_connectable字段，来声明哪些web应用能够经过后面的方式，与扩展程序创建链接。在matches字段中，注明须要通讯的web网站清单。

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}
复制代码

matches数组的每一项为URL字符串。且URL值必需要包含到二级域名级别。

externally_connectable字段，还能够声明ids字段，来指定须要通讯的其余Chrome应用或者其余扩展程序。

通讯方式

从Web页面向扩展程序发送消息，可使用chrome.runtime.sendMessage,须要传入扩展程序的ID，回调函数能够接收Chrome扩展响应的消息：

const extensionId = 'deakpiepsidfpdfdioffidjfifjtest' // 想要与之通讯的扩展ID

// 向Chrome扩展发送请求
chrome.runtime.sendMessage(extensionId, {
  event: 'requestEvent',
  data: requestData,
}, (response) => {
    console.log('res data', response)
}
复制代码

在Chrome扩展内使用chrome.runtime.onMessageExternal.addListener监听消息，接收后用sendResponse发送响应消息：

chrome.runtime.onMessageExternal.addListener(async (request, sender, sendResponse) => {
  if (request.event == 'requestEvent') {
    const res = 'res message'
    sendResponse(res)
  }
})

复制代码

监听和修改Web请求

文档位置：webRequest

依然是要先进行权限声明：

{
      "name": "My extension",
      ...
      "permissions": [
        "webRequest",
        "*://*.google.com/"
      ],
      ...
  }
复制代码

Chrome提供了一系列的事件来监听Web请求生命周期的各个阶段，其中onBeforeSendHeaders事件被触发的阶段，能够用来增、删、改HTTP请求的headers。也能够在这个事件中取消请求。

用法， 修改以后return新的配置：

chrome.webRequest.onBeforeSendHeaders.addListener((details) => {
  const { requestHeaders } = details
  
  requestHeaders.push({
      name: 'x-request-xx',
      value: '...'
  })
  
  return { requestHeaders: requestHeaders }
})
复制代码

cookies操做

使用cookie相关的API，须要先在manifest.json中的permissions字段进行权限声明，要访问cookies的host也要一并声明：

{
  "name": "My extension",
  ...
  "permissions": [
    "cookies",
    "*://*.google.com/"
  ],
  ...
}
      
复制代码

Chrome共提供了5个方法和1个监听事件，用于cookie的操做和对cookie变化的监听：

方法：

• get: chrome.cookies.get(object details, function callback)
• getAll
• set
• remove
• getAllCookieStores

事件：

• onChanged

获取指定名称的cookie

chrome.cookies.get({
  url: 'https://example.com',
  name: 'token',
}, (cookie) => {
  console.log(‘token: ’, cookie.value) // cookie为获取到的cookie对象
})
复制代码

设置cookie

chrome.cookies.set({
    url: 'http://example.com',
    name: 'x-request-xx',
    value: 'value...',
  }, (cookie) => {
    console.log('set cookie', cookie)
  })
复制代码

总结

Chrome扩展与web之间通讯，还有一些其余方式，但我的认为按照官方文档中推荐的方式比较容易使用。

在开发测试的过程当中，若是担忧扩展的ID值发生变化，能够在Chrome的Dashboard中创建好应用后，把生成的public key的值配置到manifest.json的key字段中，这样就能保证开发过程当中也能生成惟一固定的的ID了。但如今新版的Dashboard改版后好像把public key隐藏掉了...

若有其它的开发技巧，还请看到这篇文章的你赐教哇~