Develop a simple chrome browser plug-in

Original address: https://blog.csdn.net/evkj2013/article/details/73550801

A large part of the reason why chrome is getting better and better is due to the feature-rich plugins; for loyal chrome users, it is really cool to understand and develop a chrome plugin that suits them.

Learn about chrome plugins

Personal understanding of chrome plug-in: 就是一个html + js +css + image的一个web应用 ; different from ordinary web applications, chrome插件除了兼容普通的js，json，h5等api，还可以调用一些浏览器级别的api，例如收藏夹，历史记录等。

Recommend two websites to understand and get started

Google official API: https://developer.chrome.com/extensions/…

360 documentation: http://open.chrome.360.cn/extension_dev/…

Start writing your first plugin

file structure

A simple demo, the file directory is as follows

It is no different from ordinary web files, so let's briefly introduce

html: store html pages
js : store js
locales : stores a multi-language compatible [optional]
image : put two pictures [initial icon]
manifest : core entry file

write a manifest

API reference documentation: http://open.chrome.360.cn/extension_dev/…

Go directly to the code:

{
  "name": "hijack analyse plug",
  "version": "0.0.1",
  "manifest_version": 2,

  // 简单描述
  "description": "chrome plug analyse and guard the http hijack",
  "icons": {
    "16": "image/icon16.png",
    "48": "image/icon48.png"
  },
  // 选择默认语言
  "default_locale": "en",

  // 浏览器小图表部分
  "browser_action": {
    "default_title": "反劫持",
    "default_icon": "image/icon16.png",
    "default_popup": "html/test.html"
  },

  // 引入一个脚本
  "content_scripts": [
    {
      "js": ["script/test.js"],
      // 在什么情况下使用该脚本
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      // 什么情况下运行【文档加载开始】
      "run_at": "document_start"
    }
  ],
  // 应用协议页面
  "permissions": [
    "http://*/*",
    "https://*/*"
  ]
}

test.js file

/**
 * @author: cuixiaohuan
 * Date: 16/4/13
 * Time: 下午8:41
 */
(function(){
    /**
     * just test for run by self
     */
    console.log('begin');
})();

test.html file

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>just for test</title>
</head>
<body>
<h3>test</h3>
</body>
</html>

Run the plugin

Type in chrome: chrome://extensions

Select to load the unzipped plugin -> select the file root directory.

The effect is as follows:

A basic plug-in has been completed, check it is enabled, open a web page casually, and you will see the following output in the log

Click on the small icon at the top of the page as shown below:

Optimization suggestions

A small plugin is done, but there are more apis and interesting things to do. The following are some optimization suggestions given in the 360 document for mutual encouragement.

确认 Browser actions 只使用在大多数网站都有功能需求的场景下。确认 Browser actions 没有使用在少数网页才有功能的场景，此场景请使用page actions。
确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。
尽量使用alpha通道并且柔滑你的图标边缘，因为很多用户使用themes，你的图标应该在在各种背景下都表现不错。不要不停的闪动你的图标，这很惹人反感。