Chrome plugin (extension) development guide (complete demo)

Written in front

It took me nearly a month to write this blog post on and off, and carefully wrote a complete demo. Everyone knows how hard it is to write a blog, so please be sure to keep the source when reprinting. Most of the codes involved in this article are in this demo: https://github.com/sxei/chrome-plugin-demo, you can download it and run it directly.

In addition, there are many pictures in this article, and the bandwidth of the picture server is limited. The directory scrolling monitoring in the lower right corner must wait until all the pictures are loaded before it will be triggered, so please wait patiently for the loading to be completed.

Contents of this article:

Some screenshots of the demo:

Preface

What is a Chrome plugin

Strictly speaking, what we are talking about should be called Chrome Extension . A true Chrome plug-in is a lower-level browser function extension, which may require a certain understanding of the browser source code to be able to develop. Since people are used to calling Chrome plug-in, this article will also use this name, but readers should be aware that the Chrome plug-in described in this article actually refers to Chrome extension.

Chrome plug-in is a software developed with Web technology to enhance browser functions. It is actually a compressed package with a .crx suffix consisting of HTML, CSS, JS, pictures and other resources.

I guess crx may be the abbreviation of the following three letters Chrome Extension :

In addition, it is not just front-end technology. Chrome plug-ins can also cooperate with dll dynamic link libraries written in C++ to implement some lower-level functions (NPAPI), such as full-screen screenshots.

Due to security reasons, Chrome browser versions 42 and above no longer support NPAPI plug-ins and have replaced them with the more secure PPAPI.

What is the significance of learning Chrome plug-in development?

Enhance browser functionality, easily create your own "customized" browser, and more.

The Chrome plugin provides many useful APIs for us to use, including but not limited to:

• Bookmark control;
• Download control;
• Window control;
• Label control;
• Network request control and various event monitoring;
• Customize native menu;
• Perfect communication mechanism;
• etc;

Why a Chrome plugin instead of a Firefox plugin?

• Chrome has a higher market share and is used by more people;
• Easier development;
• The application scenarios are wider. Firefox plug-ins can only run on Firefox, while Chrome can run on all domestic browsers with webkit kernels, such as 360 Speed ​​Browser, 360 Security Browser, Sogou Browser, QQ Browser, etc.
• In addition, the Firefox browser also provides certain support for the operation of Chrome plug-ins;

Development and debugging

The Chrome plug-in does not have strict project structure requirements. As long as there is a manifest.json in this directory, it does not require a special IDE, and ordinary web development tools can be used.

You can enter the plug-in management page from the upper right corner menu -> More Tools -> Extensions, or you can directly enter chrome://extensions in the address bar to access it.

Check開發者模式to load the plugin directly in the form of a folder, otherwise you can only install files in .crx format. Chrome requires that plug-ins must be installed from its Chrome App Store. Plug-ins downloaded from any other website cannot be installed directly. Therefore, we can actually unzip the crx file and then load it directly through developer mode.

During development, any changes to the code require the plugin to be reloaded. Just press Ctrl+R on the plugin management page. It is best to refresh the page just in case.

Core Introduction

manifest.json

This is the most important and essential file of a Chrome plug-in. It is used to configure all plug-in-related configurations and must be placed in the root directory. Among them, manifest_version , name , and version are essential, while description and icons are recommended.

Below are some common configuration items, all with Chinese comments. For the complete configuration document, please click here.

{
	// The version of the manifest file, this must be written, and must be 2
	"manifest_version": 2,
	// The name of the plugin "name": "demo",
	// Version of the plugin "version": "1.0.0",
	// Plugin description "description": "Simple Chrome extension demo",
	// Icons, it's OK to just use one size for all icons "icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	// Background JS or background page that will always be present "background":
	{
		// 2 ways to specify, if you specify JS, a background page will be automatically generated "page": "background.html"
		//"scripts": ["js/background.js"]
	},
	// Browser icon settings in the upper right corner, browser_action, page_action, app must be selected "browser_action": 
	{
		"default_icon": "img/icon.png",
		// The title when the icon is hovered, optional "default_title": "This is a sample Chrome plugin",
		"default_popup": "popup.html"
	},
	// Icons that are displayed only when certain pages are opened /*"page_action":
	{
		"default_icon": "img/icon.png",
		"default_title": "I am pageAction",
		"default_popup": "popup.html"
	},*/
	// Need to inject JS directly into the page
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" means matching all addresses "matches": ["<all_urls>"],
			// Multiple JS are injected in sequence "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// You can inject JS casually, but you must be careful with CSS, because it may affect the global style if you are not careful "css": ["css/custom.css"],
			// Time for code injection, optional values: "document_start", "document_end", or "document_idle", the last one means when the page is idle, the default is document_idle
			"run_at": "document_start"
		},
		// This is just to demonstrate that content-script can be configured with multiple rules {
			"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
			"js": ["js/show-image-content-size.js"]
		}
	],
	// Permission application "permissions":
	[
		"contextMenus", // right-click menu "tabs", // tags "notifications", // notifications "webRequest", // web request "webRequestBlocking",
		"storage", // Plugin local storage "http://*/*", // Websites that can be accessed via executeScript or insertCSS "https://*/*" // Websites that can be accessed via executeScript or insertCSS ],
	// List of plugin resources that can be directly accessed by ordinary pages. If not set, they cannot be directly accessed "web_accessible_resources": ["js/inject.js"],
	// Plugin homepage, this is very important, don't waste this free advertising space "homepage_url": "https://www.baidu.com",
	// Override the browser default page "chrome_url_overrides":
	{
		// Override the browser's default new tab page "newtab": "newtab.html"
	},
	// How to write the plugin configuration page before Chrome 40 "options_page": "options.html",
	// How to write the plugin configuration page in Chrome 40 and later. If you write both, the new version of Chrome only recognizes the latter one "options_ui":
	{
		"page": "options.html",
		// Add some default styles, it is recommended to use "chrome_style": true
	},
	// Register a keyword to the address bar to provide search suggestions. Only one keyword can be set "omnibox": { "keyword" : "go" },
	// Default language "default_locale": "zh_CN",
	// devtools page entry, note that it can only point to an HTML file, not a JS file "devtools_page": "devtools.html"
}

content-scripts

The so-called content-scripts is actually a form of script injection into the page in the Chrome plug-in (although it is called script, it can actually include CSS). With the help of content-scripts , we can easily inject JS and CSS into the specified page through configuration (if dynamic injection is required, please refer to the following). The most common examples are: ad blocking, page CSS customization, etc.

Example configuration:

{
	// Need to inject JS directly into the page
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" means matching all addresses "matches": ["<all_urls>"],
			// Multiple JS are injected in sequence "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// You can inject JS casually, but you must be careful with CSS, because it may affect the global style if you are not careful "css": ["css/custom.css"],
			// Time for code injection, optional values: "document_start", "document_end", or "document_idle", the last one means when the page is idle, the default is document_idle
			"run_at": "document_start"
		}
	],
}

Note that if run_at is not specified as document_start (the default is document_idle ), the following code will not work:

document.addEventListener('DOMContentLoaded', function()
{
	console.log('I was executed!');
});

content-scripts and the original page share the DOM, but not the JS. If you want to access the page JS (such as a JS variable), you can only do it through injected js . content-scripts cannot access most of chrome.xxx.api , except for the following 4:

• chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
• chrome.i18n
• chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
• chrome.storage

In fact, don’t be pessimistic when you see this. These APIs are sufficient most of the time. If you really need to call other APIs, you can also use communication to let the background help you call (more on communication later).

Well, the Chrome plug-in provides us with such a powerful JS injection function. The rest is to use your imagination to play with the browser.

background

The background (let's translate it this way) is a permanent page with the longest life cycle of all types of pages in the plug-in. It opens when the browser is opened and closes when the browser is closed, so the global code that needs to run all the time and runs at startup is usually placed in the background.

Background has very high permissions and can call almost all Chrome extension APIs (except devtools), and it can access any website across domains without restrictions, that is, it can access any website across domains without requiring the other party to set CORS .

After testing, it is not just background, but all web pages opened directly through chrome-extension://id/xx.html can cross-domain without restrictions.

In the configuration, background can specify a web page through page , or directly specify a JS through scripts . Chrome will automatically generate a default web page for this JS:

{
	// Background JS or background page that will always be present "background":
	{
		// 2 ways to specify, if you specify JS, a background page will be automatically generated "page": "background.html"
		//"scripts": ["js/background.js"]
	},
}

It should be noted that although you can directly open the background page through chrome-extension://xxx/background.html , the background page you open is not the same as the page that actually runs in the background. In other words, you can open countless background.html , but there is only one that actually stays in the background, and you can never see its interface, you can only debug its code.

event-pages

Here I would like to introduce event-pages. What is it? Since the background lifecycle is too long, mounting the background for a long time may affect performance, so Google created event-pages . The only difference between it and background in the configuration file is an additional persistent parameter:

{
	"background":
	{
		"scripts": ["event-page.js"],
		"persistent": false
	},
}

Its life cycle is: loaded when needed and closed when idle. What does it mean when needed? For example, the first installation, plugin update, content-script sending messages to it, etc.

In addition to the changes in the configuration files, there are also some minor changes in the code. I just need to take a quick look at them. Generally speaking, the background will not consume much performance.

popup

popup is a small window web page that opens when you click browser_action or page_action icon. It closes immediately when the focus leaves the web page. It is generally used for some temporary interactions.

popup can contain any HTML content you want, and will resize automatically. You can specify the popup page through the default_popup field, or call setPopup() method.

Configuration method:

{
	"browser_action":
	{
		"default_icon": "img/icon.png",
		// The title when the icon is hovered, optional "default_title": "This is a sample Chrome plugin",
		"default_popup": "popup.html"
	}
} 

It is important to note that since a popup is opened by clicking an icon and closed immediately when the focus is removed, the life cycle of a popup page is generally very short. Code that needs to run for a long time should never be written in a popup.

In terms of permissions, it is very similar to background. The biggest difference between them is the difference in life cycle. In popup, you can directly get the background window object through chrome.extension.getBackgroundPage() .

injected-script

injected-script here is a name I gave it, which refers to a kind of JS injected into the page through DOM manipulation. Why should we discuss this kind of JS separately? Or why do we need to inject JS in this way?

This is because content-script has a big "flaw", that is, it cannot access the JS in the page. Although it can operate the DOM, the DOM cannot call it, that is, it is impossible to call the code in content-script by binding events in the DOM (including directly writing onclick and addEventListener ). However, "adding a button to the page and calling the plug-in's extension API" is a very common requirement, so what should we do? In fact, this is what this section is about.

In content-script inject-script code example is injected into the page through DOM:

// Inject JS into the page
function injectCustomJs(jsPath)
{
	jsPath = jsPath || 'js/inject.js';
	var temp = document.createElement('script');
	temp.setAttribute('type', 'text/javascript');
	// The obtained address is similar to: chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
	temp.src = chrome.extension.getURL(jsPath);
	temp.onload = function()
	{
		// It doesn't look good on the page, remove it after execution this.parentNode.removeChild(this);
	};
	document.head.appendChild(temp);
}

Do you think that's all? If you execute it, you will see the following error:

Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

This means that if you want to directly access the resources in the plugin on the web, you must declare it explicitly. Add the following to the configuration file:

{
	// List of plugin resources that can be directly accessed by ordinary pages. If not set, they cannot be directly accessed "web_accessible_resources": ["js/inject.js"],
}

As for how inject-script calls the code in content-script , I will introduce it in detail in a special message communication chapter later.

homepage_url

Developer or plugin homepage settings are generally displayed in the following two places:

8 display modes of Chrome plug-in

browserAction (upper right corner of the browser)

By configuring browser_action , you can add an icon to the upper right corner of the browser. A browser_action can have an icon, a tooltip , a badge and a popup .

The example configuration is as follows:

"browser_action":
{
	"default_icon": "img/icon.png",
	"default_title": "This is a sample Chrome plugin",
	"default_popup": "popup.html"
}

icon

The browser_action icon is recommended to use an image with a width and height of 19 pixels. Larger icons will be reduced in size. The format is arbitrary, and png is generally recommended. It can be configured through the default_icon field in the manifest, or by calling the setIcon() method.

tooltip

Modify the default_title field in browser_action manifest, or call setTitle() method.

badge

The so-called badge is to display some text on the icon, which can be used to update some small extended status prompt information. Because badge space is limited, it only supports 4 characters or less (4 for English and 2 for Chinese). The badge cannot be specified through the configuration file and must be implemented through code. To set the badge text and color, use setBadgeText() and setBadgeBackgroundColor() respectively.

chrome.browserAction.setBadgeText({text: 'new'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

Effect:

pageAction (right side of the address bar)

The so-called pageAction refers to an icon that is displayed only when certain specific pages are opened. The biggest difference between it and browserAction is that one is always displayed and the other is only displayed in specific situations.

It should be noted that earlier versions of Chrome placed pageAction on the far right of the address bar. Left-clicking it pops up a pop-up, and right-clicking it pops up a default option menu:

The new version of Chrome has changed this strategy. PageAction is placed in the upper right corner of the browser just like the normal browserAction, but it is gray when not lit and colorful when lit. When it is gray, options will pop up whether you left or right-click:

I didn't study in detail which version the change started, but I know that it was still the former in v50.0 and was changed to the latter in v58.0.

After the adjustment, we can simply regard pageAction as browserAction that can be grayed out.

• chrome.pageAction.show(tabId) displays the icon;
• chrome.pageAction.hide(tabId) hides the icon;

Example (the icon is only displayed when Baidu is opened):

// manifest.json
{
	"page_action":
	{
		"default_icon": "img/icon.png",
		"default_title": "I am pageAction",
		"default_popup": "popup.html"
	},
	"permissions": ["declarativeContent"]
}

// background.js
chrome.runtime.onInstalled.addListener(function(){
	chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
		chrome.declarativeContent.onPageChanged.addRules([
			{
				conditions: [
					// Only when Baidu is opened will pageAction be displayed
					new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
				],
				actions: [new chrome.declarativeContent.ShowPageAction()]
			}
		]);
	});
});

Effect picture:

Right-click menu

By developing a Chrome plug-in, you can customize the browser's right-click menu, mainly through chrome.contextMenus API. The right-click menu can appear in different contexts, such as normal pages, selected text, images, links, etc. If there are multiple menus defined in the same plug-in, Chrome will automatically combine them into a secondary menu named after the plug-in, as follows:

The simplest right-click menu example

// manifest.json
{"permissions": ["contextMenus"]}

// background.js
chrome.contextMenus.create({
	title: "Test right-click menu",
	onclick: function(){alert('You clicked the right-click menu!');}
});

Effect:

Add right click Baidu search

// manifest.json
{"permissions": ["contextMenus", "tabs"]}

// background.js
chrome.contextMenus.create({
	title: 'Use Baidu to search: %s', // %s indicates the selected text contexts: ['selection'], // This right-click menu will only appear when a text is selected onclick: function(params)
	{
		// Note that location.href cannot be used because location is a window object belonging to background chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
	}
});

The effect is as follows:

Syntax

Here are just a few common ones. For the complete API, see: https://developer.chrome.com/extensions/contextMenus

chrome.contextMenus.create({
	type: 'normal', // type, optional: ["normal", "checkbox", "radio", "separator"], default normal
	title: 'Menu name', // The displayed text, unless the type is "separator", this parameter is required. If the type is "selection", you can use %s to display the selected text contexts: ['page'], // Context, optional: ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"], default page
	onclick: function(){}, // Method triggered when clicked parentId: 1, // Parent menu item ID of the right-click menu item. Specifying a parent menu item will make this menu item a submenu of the parent menu item documentUrlPatterns: 'https://*.baidu.com/*' // Only display this right-click menu on certain pages});
// Delete a menu item chrome.contextMenus.remove(menuItemId);
// Delete all custom right-click menus chrome.contextMenus.removeAll();
// Update a menu item chrome.contextMenus.update(menuItemId, updateProperties);

override (override a specific page)

Using the override page, you can replace some specific pages of Chrome's default browser with pages provided by the extension.

The extension can replace the following pages:

• History: Pages visited when you click History from the Tools menu, or type chrome://history directly from the address bar
• New Tab Page: The page you visit when you create a new tab, or simply type chrome://newtab in the address bar.
• Bookmarks: Browser bookmarks, or directly enter chrome://bookmarks

Notice:

• An extension can only replace one page;
• It is not a replacement for the new tab page of an incognito window;
• Web pages must have a title, otherwise users may see the URL of the web page, causing confusion;

The screenshots below show the default new tab page and the new tab page replaced by the extension.

Code (note that a plugin can only replace one default page, the following is just for demonstration):

"chrome_url_overrides":
{
	"newtab": "newtab.html",
	"history": "history.html",
	"bookmarks": "bookmarks.html"
}

devtools

Preheat

Those who have used Vue should have seen this type of plug-in:

Yes, Chrome allows plugins to tamper with developer tools (devtools), mainly in the following ways:

• Customize one or more panels at the same level as Elements , Console , Sources , etc.
• Customize the sidebar. Currently, you can only customize the sidebar of the Elements panel.

Let's first look at two simple demo screenshots, custom panels (to determine whether jQuery is used on the current page):

Customize the sidebar (get all pictures of the current page):

Introduction to the devtools extension

Home page: https://developer.chrome.com/extensions/devtools

Here is an official picture:

Every time a developer tool window is opened, an instance of the devtools page is created. When the F12 window is closed, the page is also closed, so the life cycle of the devtools page is consistent with the devtools window. The devtools page can access a set of unique DevTools API and a limited set of extension APIs. This set of unique DevTools API is only accessible to the devtools page and not to the background. These APIs include:

• chrome.devtools.panels : panel related;
• chrome.devtools.inspectedWindow : Get information about the inspected window;
• chrome.devtools.network : Get information about network requests;

Most extension APIs cannot be called directly by the DevTools page, but it can directly call chrome.extension and chrome.runtime APIs like content-script . It can also communicate with the background page using Message interaction like content-script .

Example: Creating a devtools extension

First, to develop a plugin for the developer tools, you need to declare the following in the manifest file:

{
	// Can only point to an HTML file, not a JS file "devtools_page": "devtools.html"
}

This devtools.html usually has nothing in it, so just introduce a js:

<!DOCTYPE html>
<html>
<head></head>
<body>
	<script type="text/javascript" src="js/devtools.js"></script>
</body>
</html>

It can be seen that the real code is devtools.js , and the html file is "redundant", so I feel a little bit trapped here. Why doesn't devtools_page allow you to directly specify JS?

Let’s look at the code of devtools.js:

// Create a custom panel. The same plug-in can create multiple custom panels. // The parameters are: panel title, icon (actually, there is no place to display it), page to load, callback after successful loading chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
	console.log('Custom panel created successfully!'); // Note that this log is usually not visible});

// Create a custom sidebar chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
{
	// sidebar.setPage('../sidebar.html'); // Specify a page to load sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // Specify by expression //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // Directly set the display of an object});

The effect of setPage:

The following screenshot shows the code:

// Detect jQuery
document.getElementById('check_jquery').addEventListener('click', function()
{
	// Accessing the inspected page DOM requires the use of inspectedWindow
	// Simple example: Check if the page being checked uses jQuery
	chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException)
	{
		var html = '';
		if (isException) html = 'The current page does not use jQuery. ';
		else html = 'The current page uses jQuery, the version is:' + result;
		alert(html);
	});
});

// Open a resource document.getElementById('open_resource').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException)
	{
		chrome.devtools.panels.openResource(result, 20, function()
		{
			console.log('Resource opened successfully!');
		});
	});
});

// Review element document.getElementById('test_inspect').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
});

// Get all resources document.getElementById('get_all_resources').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.getResources(function(resources)
	{
		alert(JSON.stringify(resources));
	});
});

Debugging Tips

When you modify the code on the devtools page, you need to press Ctrl+R on the chrome://extensions page to reload the extension, then close and reopen the developer tools without refreshing the page (and refreshing the page without refreshing the developer tools will not take effect).

Since devtools itself is a developer tool page, there is almost no way to debug it directly. Opening the page directly using chrome-extension://extid/devtools.html" will definitely result in errors because the relevant special APIs are not supported. You can only write some methods to block these errors and then release them after debugging.

option (option page)

The so-called options page is the settings page of the plug-in. There are two entrances, one is the "Options" menu when you right-click the icon, and the other is the plug-in management page:

Before Chrome 40, the options page was no different from other ordinary pages, but there were some changes after Chrome 40.

Let's first look at the old version of options:

{
	// How to write the plugin configuration page before Chrome 40 "options_page": "options.html",
}

The content of this page is up to you. After configuration, you will see an選項button entrance on the plug-in management page. Clicking it will open a web page. There is nothing much to say.

Effect:

Let’s look at the new version of optionsV2:

{
	"options_ui":
	{
    	"page": "options.html",
		// Add some default styles, it is recommended to use "chrome_style": true
	},
}

We did not change the code of options.html , but only changed the configuration file, and the effect is as follows:

Doesn’t it look tall and majestic?

A few notes:

• For compatibility, it is recommended to write both methods. If both are written, Chrome 40 and later will read the new version by default.
• Alert cannot be used in the new version of options;
• It is recommended to use chrome.storage for data storage because it will be automatically synchronized with the user;

omnibox

omnibox is a way to provide search suggestions to users. Let's take a look at a gif to understand what this thing is:

Register a keyword to trigger the plugin's own search suggestion interface, and then you can do whatever you want with it.

First, the configuration file is as follows:

{
	// Register a keyword to the address bar to provide search suggestions. Only one keyword can be set "omnibox": { "keyword" : "go" },
}

Then register the listener event in background.js :

// omnibox demo chrome.omnibox.onInputChanged.addListener((text, suggest) => {
	console.log('inputChanged: ' + text);
	if(!text) return;
	if(text == 'Beauty') {
		suggest([
			{content: '中国' + text, description: 'Are you looking for "Chinese beauties"? '},
			{content: '日本' + text, description: 'Are you looking for "Japanese beauties"? '},
			{content: 'Thailand' + text, description: 'Are you looking for "Thai beauties or ladyboys"? '},
			{content: '韩国' + text, description: 'Are you looking for "Korean beauties"? '}
		]);
	}
	else if(text == 'Weibo') {
		suggest([
			{content: 'Sina' + text, description: 'Sina' + text},
			{content: 'Tencent' + text, description: 'Tencent' + text},
			{content: 'Sohu' + text, description: 'Search' + text},
		]);
	}
	else {
		suggest([
			{content: 'Baidu search' + text, description: 'Baidu search' + text},
			{content: 'Google search' + text, description: 'Google search' + text},
		]);
	}
});

// Triggered when the user receives keyword suggestions chrome.omnibox.onInputEntered.addListener((text) => {
    console.log('inputEntered: ' + text);
	if(!text) return;
	var href = '';
    if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;
	else if(text.startsWith('Baidu Search')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('Baidu Search', '');
	else if(text.startsWith('Google Search')) href = 'https://www.google.com.tw/search?q=' + text.replace('Google Search', '');
	else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;
	openUrlCurrentTab(href);
});
// Get the current tab ID
function getCurrentTabId(callback)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		if (callback) callback (tabs.length ? tabs[0].id: null);
	});
}

//Open a link in the current tab function openUrlCurrentTab(url)
{
	getCurrentTabId(tabId => {
		chrome.tabs.update(tabId, {url: url});
	})
}

Desktop Notifications

Chrome provides a chrome.notifications API for plug-ins to push desktop notifications. No significant differences or advantages have been found between chrome.notifications and HTML5's native Notification .

In the background JS, whether using chrome.notifications or Notification you do not need to apply for permissions (HTML5 method requires applying for permissions), you can use it directly.

The simplest notification:

Code:

chrome.notifications.create(null, {
	type: 'basic',
	iconUrl: 'img/icon.png',
	title: 'This is the title',
	message: 'You just clicked the custom right-click menu! '
});

The notification styles can be very rich:

This has not been studied in depth, you can read the official documentation if you need it.

Comparison of 5 types of JS

Chrome plug-in JS can be mainly divided into these five categories: injected script , content-script , popup js , background js and devtools js .

Permission comparison

Comparison of debugging methods

JS Type	Debugging mode	Image Description
injected script	Just press the normal F12	Too lazy to take screenshots
content-script	Open the Console and switch as shown in the figure
popup-js	Right click on the popup page to inspect the elements
background	Click the background page on the plugin management page
devtools-js	No effective method has been found yet	-