google 插件_开发google浏览器插件小记

前言

由于最近因为某种原因，需要开发一个即时通讯的插件来供运营来使用，于是打算前端使用google插件来开发，和后端通讯使用EventSource来通讯。

manifest.json

插件必备文件，其中manifest_version、name、version3个是必不可少的，description和icons是推荐的

{
  "manifest_version": 2, // 此值必须为 2
  "name": "站内信",
  "version": "1.0.0",
  "description": "站内信谷歌浏览器插件",
  "icons": { // 对应 chrome://extensions/ 插件的图标
    "16": "img/logo.ico",
  "48": "img/logo.ico",
  "128": "img/logo.ico"
  },
  "browser_action": {
    "default_icon": "img/logo.ico", // 浏览器右上角图标
    "default_title": "站内信谷歌浏览器插件", // 图标悬停时的标题
    "default_popup": "index.html" // 点击图标对应打开的弹窗
  },
  "page_action": { // 特定页面下右上角的图标
    "default_icon": "img/icon.png",
    "default_title": "我是pageAction",
    "default_popup": "index.html"
  },
  "background": { // 会一直在后台的文件
    "page": "",
    "scripts": ["background.js"]
  },
  "content_scripts": [ // 需要注入js的页面
    {
      "matches": ["*://*.imdada.cn/*"],
      "js": ["sendUrl.js"],
      // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
      "run_at": "document_start"
    }
  ],
  "homepage_url": "", // 主页地址
  "permissions": [ // 权限列表 https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions
    "tabs", // tab
    "webRequest", // 接口请求
    "webRequestBlocking", // 接口取消
    "notifications", // 通知
    "storage", // 存储
    "cookies", // cookie
    "contextMenus", // 右键
    "*://*.imdada.cn/*"
  ]
}

获取用户信息

sendUrl.js文件负责发送当前页面的url

(function() {
  chrome.runtime.sendMessage({
    url: window.location.href
  }, res => {
    console.log(res)
  })
}())

background.js文件负责接受传来的url来设置cookie

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  chrome.cookies.getAll({
    url: request.url,
  }, cookies => {
    Cookies.set('dauth', null)
    cookies.forEach(cookie => {
      const { name, value } = cookie
      Cookies.set(name, value)
    });
    initSSE()
  })
  // 回调函数，通知页面cookie已更新
  sendResponse('cookie update success')
})

建立SSE链接

const initSSE = () => {
  if (!window.dada_google__ES && hasDauth()) {
    window.dada_google__ES = new EventSource('http://localhost:3000/sse', {
      withCredentials: true,
    })
    window.dada_google__ES.addEventListener('open', () => {
      console.log('建立连接了')
    })
    window.dada_google__ES.addEventListener('message', data => {
      const { count, url, title, desc, system } = JSON.parse(data.data)
      // 设置插件右上角的数量
      chrome.browserAction.setBadgeText({text: String(count)});
      // 设置插件右上角的背景色
      chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});
      const notice = new Notification(title, {
        icon: 'img/logo.png',
        body: desc,
        tag: system,
        data: url
      })
      notice.onclick = event => {
        notice.close()
        event.target.data && chrome.tabs.create({
          url: event.target.data
        })
      }
    })
    window.dada_google__ES.addEventListener('close', () => {
      console.log('关闭链接')
    })
    window.dada_google__ES.addEventListener('error', error => {
      console.log(error, 'sse连接出现错误')
    })
  }
}

sse链接建立成功后可以看到

notice通知如下

遇到的问题

Q、问什么使用Notification而没有使用chrome.notifications？

A、Notification比chrome.notifications的扩展灵活，支持的字段多。

Q、使用Notification不需要授权嘛？

A、和cookie一样，不需要授权的，可以直接通知的。

Q、cookie可以获取到httponly为true的值嘛？

A、谷歌浏览器插件的优先级最高，可以直接获取到httponly为true的值的。

Q、点击notifications打开的tab有问题？

A、需要打开的域名需要在manifest.json ---> permissions配置对应的域名，否则打不开。

参考文档

manifest.jsonEventSourceNotification