I just finished the plug-in project development recently, so I summarize some projects used in the plug-in development chrome API, if there is any error, please point out ~

Chrome application

chrome.storage.sync/chrome.storage.local

Use the Chrome. storage API to store user data and track changes to user data. This is an API optimized for plug-in storage needs. It provides the same functionality as the LocalStorage API, but with the following differences: User data can be automatically synchronized using the Sync function of Chrome (storage.sync) 2. With storage.sync, stored data will be automatically synchronized between all Chrome browsers that the user has enabled synchronization and is logged in to. The plugin can directly access user data, do not need the background page, directly from storage 4. Asynchronous and capable of extensive read and write operations. So faster than blocking and serializing localStorage APIS 5. User data can be stored as objects (the localStorage API stores data as strings)

Note: I think this way of storing, only synchronization data, there is no interface to view, only console out, background page and content page can be accessed, and only reload plug-in, can delete the previous record

chrome.storage.sync.get({
    autoIsOpen : 'true' // Whether to enable it automatically
}, (items)=>{
    console.log(items.autoIsOpen);
});
chrome.storage.sync.set({
    isUserKown : true // Whether to specify by user
});
Copy the code

sessionStorage/localStorage

Note: This way to store, you can open the plugin’s background page (background-html), you can see some of the stored data, and right click on the clear


  • SessionStorage Session Clearing Cleared when the page is closed
  • LocalStorage stores data that has no expiration date and is not deleted when the browser is closed
localStorage.setItem('url'.'baidu.com');
let urlLocal = localStorage.getItem('url');
localStorage.removeItem('url');
Copy the code

guid

  • Guids are used as unique user identifiers for data reporting
chrome.environment.getMachineGuid((guid) = >{userId = guid; });Copy the code

Chrome sends and listens to messages

chrome.runtime API

  • Chrome. Runtime. SendMessage (string extensionId, any message, object option and the function responseCallback) note: ExtensionId: The identifier of the extension or application that sends the message, which can be seen on the browser’s application page. Each plug-in has a unique ID. If omitted, the message is sent to its own plug-in
// Send a message to your plug-in
chrome.runtime.sendMessage({ isUser: true.reportId: 8888.timer: 0.type: 'baidu.com'}, () => {});// Send messages to other plug-ins
chrome.runtime.sendMessage('ididididididididid', {
    cmd: 'cmd_istall'.// Treat different requests differently in order to receive them
    data: {
        isUser: true.reportId: 8888.url: 'baidu.com'.tips: "Baidu"}},function (res) = >{
    if (res) {
        // do something...}});Copy the code

Note: 1. You can only send a single message to your plug-in or another plug-in. 2. If it is to use chrome. Runtime. SendMessage this method to send their own messages, and each plug-in can be injected into the page will generate the runtime. OnMessage, but the plugin itself content. js cannot receive and listening to the news, Background.js can be received in this way, which is usually used for data reporting. If it is sending a message to a plug-in or other application, then in another plug-in can use runtime. OnMessageExternal listening in

// This method cannot be written in content.js, but only in background.js
chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) = > {
    if (request && request.cmd) {
        switch (request.cmd) {
            case 'cmd_install':
                // do something...
                sendResponse('installed');
                return true;// Return true to pass the parameters to be called back to sendResponse(' XXX ') via res To obtain}}})Copy the code

4. If you want your content.js to listen for incoming messages, use chrome.tabs. SendMessage in backbackground

// chrome.tabs. Query Gets the current display of the current window
chrome.tabs.query({ active: true.currentWindow: true }, (tabs) => {
    if(tabs.length ! = =0) {
        // Send a message to its content.js
        chrome.tabs.sendMessage(tabs[0].id, message, (response) => {
            currentMainFrameUrl = tabs[0].url;// Record the current window URL
            if (callback) {
                callback(response, tabs[0]); }}); }});// content.js listener messages are written in content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) = > {});
Copy the code

5. If content.js sends some requests, backbackground. Js listens for the request, using Chrome.extentsion

// content.js
chrome.extension.sendRequest(
    { 
        cmd: 'background-send-message'.data: text 
    }, (res) => {
        // res.XXX});// background.js
chrome.extension.onRequest.addListener((request, sender, sendResponse) = > {
    if (request && request.cmd) {
        // do something ...}});Copy the code

Create the right

Chrome right

  • Use Chrome. contextMenus to create/delete things like chrome’s right menu
/ / create
chrome.contextMenus.create({
    id: 'contextMenus-id'.title: 'translation "% s".// Classical Chinese content => %s is the underlined word
    contexts: ['selection'].// Right-click content => when the right-click appears (all, pages, selected content, links...)
    onclick (params) {
        // do something ...}});/ / delete
chrome.contextMenus.remove('contextMenus-id');
Copy the code