Developing a Google Browser plugin

preface

Recently, due to some reasons, we need to develop an instant messaging plug-in for operation, so we plan to use Google plug-in for front-end development and EventSource for back-end communication.

manifest.json

The necessary plug-in file, in which manifest_version, name, and versionare indispensable, and description and ICONS are recommended

{
  "manifest_version": 2// This value must be 2  "name": "In-station message".  "version": "1.0.0".  "description": "Google Chrome Plugin for In-site Letter". "icons": {// corresponds to the icon of Chrome :// Extensions/plug-in "16": "img/logo.ico". "48": "img/logo.ico". "128": "img/logo.ico"  },  "browser_action": {  "default_icon": "img/logo.ico"// Icon in the upper right corner of the browser "default_title": "Google Chrome Plugin for In-site Letter"// The title of the icon when it is hovering "default_popup": "index.html"// Click the popover corresponding to the icon },  "page_action": {// The icon in the upper right corner of a particular page "default_icon": "img/icon.png". "default_title": "I am pageAction". "default_popup": "index.html"  },  "background": {// the file will always be in the background "page": "". "scripts": ["background.js"]  },  "content_scripts": [// the page that needs to inject JS {  "matches": ["*://*.imdada.cn/*"]. "js": ["sendUrl.js"].// Code injection time, optional value:"document_start"."document_end", or "document_idle", the last one indicates that when the page is free, the default document_idle "run_at": "document_start"  } ]. "homepage_url": ""// Home page address "permissions": / / https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions/permission list "tabs", // tab  "webRequest"// Interface request "webRequestBlocking"// The interface is cancelled "notifications"/ / notice "storage"/ / store "cookies", // cookie  "contextMenus"/ / right "*://*.imdada.cn/*"  ] } Copy the code

Obtaining User information

The sendurl.js file is responsible for sending the URL of the current page

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

The background.js file is responsible for accepting the passed URL to set the 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()  })  // The callback function notifies the page that the cookie has been updated  sendResponse('cookie update success') }) Copy the code

Setting up SSE links

const initSSE = (a)= > {
  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('Connection established')  })  window.dada_google__ES.addEventListener('message', data => {  const { count, url, title, desc, system } = JSON.parse(data.data)  // Set the number in the upper right corner of the plug-in  chrome.browserAction.setBadgeText({text: String(count)});  // Set the background color in the upper right corner of the plugin  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('Close links')  })  window.dada_google__ES.addEventListener('error', error => {  console.log(error, 'SSE connection error')  })  } } Copy the code

You can view the SSE link after it is successfully established

Notice as follows

Problems encountered

Q, why use Notification instead of Chrome.notifications?

Notifications are more flexible than the Chrome. Notifications extension, which supports more fields.

Q. Don’t you need authorization to use Notification?

A. The same as cookies, do not need authorization, can be directly notified.

Q, can cookie get httponly true?

A, The Google Chrome plugin has the highest priority and can directly fetch httponly true.

Q, what’s wrong with clicking TAB in notifications?

Json –> Permissions; otherwise, permissions cannot be opened.

Reference documentation

manifest.json

EventSource

Notification

This article is formatted using MDNICE