Reference materials

  • Official development document: currently all English, need to turn over the ** wall.
  • Chrome plugin development overview: Github star quite a lot of a repo, development can be first over.

The information searched can be used as reference, and the latest official documents shall prevail in actual development.

File structure

  • manifest.jsonConfiguration file:Must be.Detailed documentation
  • otherJavaScript,HTML,CSSFiles: add, subtract and adjust structure according to function and personal preference.

Developing extensions is similar to WEB development, mainly using JavaScript, HTML, CSS, etc., and then calling various apis provided by Chrome according to their functions.

The resulting file structure could look something like this:

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
Copy the code

In order to prevent various subsequent functions during development, I used vuE-CLI to initialize the project, and used the plug-in vue-cli-plugin-chrome-ext to modify the file structure, and then modified vue.config.js to modify some configurations of Webpack according to my own needs.

Communication between Web pages and extensions

Official related documents

  • Message communication sends messages from web pages
  • External connection externally_connectable
  • Listen for the event onMessageExternal usage

Permission statement

First, you need to configure the externally_connectable field in manifest.json to declare which Web applications can connect to the extender in the following way. In the Matches field, indicate a list of Web sites that you want to communicate with.

"externally_connectable": {
  "matches": ["*://*.example.com/*"]}Copy the code

Each entry in the Matches array is a URL string. The URL value must contain a level 2 domain name.

The externally_connectable field can also be declared as an IDS field to specify other Chrome applications or other extensions that need to communicate.

Communication mode

Send a message from a Web page to extension program, you can use the chrome. Runtime. SendMessage, need to extension ID, the callback function can receive chrome extension response message:

const extensionId = 'deakpiepsidfpdfdioffidjfifjtest'/ / want to communicate with the extension of the ID / / send the request to the Chrome extension Chrome. Runtime. SendMessage (extensionId, {event:'requestEvent',
  data: requestData,
}, (response) => {
    console.log('res data', response)
}
Copy the code

In Chrome extension using Chrome. Runtime. OnMessageExternal. AddListener listens, used after receiving sendResponse sends a response message:

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

Copy the code

Listen for and modify Web requests

Document location: webRequest

It is still necessary to declare permissions first:

  {
      "name": "My extension"."permissions": [
        "webRequest"."*://*.google.com/"],... }Copy the code

Chrome provides a series of events to listen for various stages of the Web request lifecycle. The onBeforeSendHeaders event is triggered at the stage where it can be used to add, delete, or modify headers for HTTP requests. You can also cancel the request in this event.

Return new configuration:

chrome.webRequest.onBeforeSendHeaders.addListener((details) => {
  const { requestHeaders } = details
  
  requestHeaders.push({
      name: 'x-request-xx',
      value: '... '
  })
  
  return { requestHeaders: requestHeaders }
})
Copy the code

Cookies operation

Json; the permissions field in manifest.json must be declared as well as the host that accesses cookies:

{
  "name": "My extension"."permissions": [
    "cookies"."*://*.google.com/"],... }Copy the code

Chrome provides a total of 5 methods and 1 listening event, used for cookie operation and cookie change monitoring:

Methods:

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

Events:

  • onChanged

Gets a cookie with the specified name

chrome.cookies.get({
  url: 'https://example.com',
  name: 'token',}, (cookie) => {console.log(' token: ', cookie.value) // cookie is the obtained cookie object})Copy the code

Set the cookie

 chrome.cookies.set({
    url: 'http://example.com',
    name: 'x-request-xx',
    value: 'value... ',
  }, (cookie) => {
    console.log('set cookie', cookie)
  })
Copy the code

conclusion

The Chrome extension communicates with the Web in a few other ways, but I find it easier to use the one recommended in the official documentation.

If you are concerned that the id of the extension will change, you can retrieve the id of the current extension from backbackground. Js with Chrome.runtime. id, and send the request event through content.js. This is available on the WEB