Chrome plug-in development (a)

As a developer, we certainly will use in their daily work in Chrome browser, while Google will use some plug-ins, such as Tampermonkey, AdBlock, etc., in the previous article I also used Tampermonkey plug Haoshi and fun, portal,,

At some point we will own the development of some simple and practical plug-in, the start of this chapter we started to learn how to do some simple Google plug-in.

As a novice, I turn to when learning how to make Google plugin notes blogger Xiao-Ming students, which inspired, in this Xianxie!


First, what plug-in is?

Plug-in is to follow a certain standardized application program interface written out of the program, while the chrome plug-in is a small program running on the chrome browser, we can help solve what some duplicate work and study in complicated things.

Second, the basics of plug-ins

For chrome plugin, the core should be manifest.json this profile, and use it in what we can define the timing of the implementation of what the script what page, what are some behavior, look at manifest.json the following format:

  1 {
  2   //

Extension name

3 "name": "MyExtension", 4 5 //

version. 1-4 is constituted by an integer. Between multiple integer with "." Separated

6 "version": "1.0", 7 8 //

manifest file version number. Chrome18 start must be 2

9 "manifest_version": 2, 10 11 //

description. 132 characters or less

12 "description": ", 13 14 // 扩展图标。推荐大小16,48,128 15 "icons": { 16 "16": "image/icon-16.png", 17 "48": "image/icon-48.png", 18 "128": "image/icon-128.png" 19 }, 20 21 //


22 "default_locale": "en", 23 24 //

The right of the address bar icon management, set up with icons and pop-up pages, etc.

25 //

Reservations recommended at least a set, or the extension icon is dark

26 "browser_action": { 27 "default_icon": "image/icon-128.png", 28 "default_title": "My Message", 29 "default_popup": "html/browser.html" 30 }, 31 32 //

Finally, an additional icon in the address bar. And with icon behavior

33 "page_action": { 34 "default_icon": "image/icon-48.png", 35 "default_title": "My Test", 36 "default_popup": "html/page.html" 37 }, 38 39 //

Theme, used to change the entire appearance of the browser

40 "theme": {}, 41 42 //

Specify the extension need to jump to a URL

43 "app": {}, 44 45 //

background operating environment and run the script to specify the extension process

46 "background": { 47 "scripts": [ 48 "lib/jquery-3.3.1.min.js", 49 "js/background.js" 50 ], 51 "page":"html/background.html" 52 }, 53 54 //

Replace page

55 "chrome_url_overrides": { 56 "pageToOverride": "html/overrides.html" 57 }, 58 59 //

Web page specified in the script to run / insert the css and run / insert timing

60 "content_scripts": [{ 61 "matches": ["*"], 62 "css": ["css/mystyles.css"], 63 "js": ["lib/jquery-3.3.1.min.js", "js/content.js"], 64 "run_at": "document_idle" 65 }], 66 67 //

security strategy

68 "content_security_policy": ", 69 70 "file_browser_handlers": [], 71 72 // 扩展的官方主页 73 "homepage_url": "http://xxx", 74 75 //

Plug configuration in privacy mode

76 "incognito": "spanning", 77 78 //

User operation intended to describe

79 "intents": {}, 80 81 //

Extended uniquely identified. You do not need to manually specified

82 "key": ", 83 84 // 扩展所需chrome的最小版本 85 "minimum_chrome_version": "1.0", 86 87 // 消息与本地处理模块映射 88 "nacl_modules": [], 89 90 // 是否允许脱机运行 91 "offline_enabled": true, 92 93 // ominbox即地址栏。用于响应地址栏的输入事件 94 "omnibox": { 95 "keyword": "myKey" 96 }, 97 98 // 选项页。用于在扩展管理页面跳转到选项设置 99 "options_page": "aFile.html", 100 101 // 申请权限 102 "permissions": [ 103 "*", 104 "background", 105 "tabs" 106 ], 107 108 //

Extension. You can call third-party extensions

109 "plugins": [{ 110 "path": "extension_plugin.dll", 111 "public": true 112 }], 113 114 //

Designated special technical needs. Currently only supports "3D"

115 "requirements": {}, 116 117 //

auto update

118 "update_url": "http://path/to/updateInfo.xml", 119 120 //

Specified resource path for String array

121 "web_accessible_resources": [] 122 }


so much? First write the code segment guard against shock, really do not be frightened, although there are so many properties available, but common to so few, we look one by one:

1, name name extension.

2, plug-in version version.

3, manifest_version manifest configuration file version.

4, description description of the plug-in functionality.

5, plug-in icon icons you can find a nice icon for the plug.

6, browser_action can define an icon widget that pops up when you click the plug-page and headline widget is always advisable to keep a direct property not set this icon is gray, the set will light up.

7, background page background, the background of the expansion process runtime environment, can intercept modify the request and so on.

8, content_scripts contents of the script, you can specify what script or css resources to insert what page in what occasion

9, permissions apply for entry permission, such as storage permission storage, request permission to intercept webRequest, webRequestBlocking and so on.

After learning the basics, all that remains is the actual function we want to achieve, write code like the following, we started writing our first plug-in, because it is the first plug-in, although the function is very simple, but we have to give him a famous name “plug Terminator”, how a termination method, hear us one by one.

First, we open the material link: http: //, which is an online book called “layman’s language webpack”, in a very very good and comprehensive interested can look back at the whole, when we look at the first a chapter of the time, everything is very good, but by the second time but there is a very annoying popups



Of course, as a programmer, we certainly can not be stumped by this little pop, and then we made the first attempt to open the developer tools to find a node where pop, removing off, but when we scroll the page when the damn bomb box appeared, stating the code in listening pop node, when there is no direct add a new. Then we did a second attempt, since you will not let me remove the node, then we are unwavering in addition, to find the same node pop, add the style: display:! None important;

Use! Important purpose is to elevate the priority of style, so pop is not always visible, after writing this style, pop and hid herself, and when scrolling will not happen again, but when we look at other sections or refresh the page when playing that annoying box came out again, can not automatically handle hide it?

It’s time to show the real technology, and we mentioned before, the basics of the time content_scripts field, you can define what the script or css resources inserted into any page at any opportunity, we only need the top page loads, is injected into the page Hide popups css code just fine.



After the above, we can check elements:

1 .gitbook-plugin-modal {
2   display: none!important;
3 }

manifest configuration file:

  "name": "PopBlock",
  "version": "1.0",
  "manifest_version": 2,
  "description": "移除闹人的弹框",
  "browser_action": {
    "default_title": "PopBlock"
  "content_scripts": [{
    "matches": ["*"],
    "css": ["css/popup.css"],
    "run_at": "document_end"

Directory structure is as follows:


This does not add icons, you can add your own, and then we load our plugin written in chrome browser developer mode, you will find there will not be annoying pop interfere with our line of sight.


We More Tools -> Extensions into the chrome of plug-in management interface, and then by doing the following:


Then we load the plug-in times, as follows:


Thus, when we open again, annoying pop disappeared.


Leave a Reply