Make the first chrome plugin

The chrome plugin is surprisingly simple once you understand how it works and how it is implemented. It is composed of a part of HTML, part JS, and then a mix of a JSON file called Manifest.json. This means that you can use the JS framework you are best at to implement it.

If you're still a new chrome plugin and want to try to write one, the following article will lead you and try to understand how chrome plugins work. This article will cover each piece of architecture, as well as the links between each other and the generalized form of plug-ins.

Architecture

The files in the Chrome plugin can be broadly divided into 2 parts: A file that does exist in the chrome plugin, and is application-level, such as Chrome Extension Scripts and files injected into each page's Dom (such as content Scripts or injected Scripts). These files are all placed in Manifest.json, which automatically identifies the role of different files within Chrome.

At any time, the popup and the background are only one, compared, if you have more than one tab (here tab refers to the chrome tabs, that is, a window page), then content scripts and injected Scripts will run in every tab, that is, it can span tabs. Of course, you can specify which tab to inject scripts, that is, the injection operation is optional.

Here are some details of how they work:

Manifest.json

• This JSON file is to put backgrounds, popups, content scripts and injected scripts together and write in a structured way.
• Set up extensions, such as permission.
• Sets the basic information for the extension.

Background

• JavaScript files are always running in the background (in older versions of Chrome, background is an HTML file and embedded with JavaScript).
• No display interface.
• have access to chrome application-level commands.
• have permission to use all Chrome APIs

Popup

• Clicking on the plugin icon will show HTML and javascirpt.
• Also has application-level permissions (as with background)
• Triggered only when the Chrome plugin's icon is clicked.
• Permissions are available for all pop-up Chrome APIs.

Content Scripts

• Have access to a subset of APIs (such as listening to messages from Backgorund)
• There is full access to the page DOM, but there is no access to any window-level object (such as a global variable), and there is no access to frame, because of security restrictions.
• The Content scripts runs between the plug-in and the page, and the Global window object is completely different from the page/plug-in global namespace.

injected Scripts

• As with Contente Scripts, you only have access to some of the APIs
• The page that is injected into the current tab does not communicate with the plugin.

Association Relationship

The connection between them as long as you understand the overall structure, I believe it will be very clear.

In the application-level section, you can have access to each other. For example, the popup file can use Chrome.extension.getBackgroundPage () to access the contents of background, it is like backbone view can access their model and collection.

Content scripts is present in each independent DOM page, and background and popup communicate in a way that communicates with a message. In particular, it can use Chrome.tabs.sendMessage and chrome.runtime.onMessage.addListener to send messages to each other. This is very much like the backbone event system.

The difference between injected scripts and content scripts is that it cannot listen or send messages to other chrome plug-in parts.

structure

　Organize your chrome plugin to better let you know the different roles of different files. The organizational structure of different projects can be similar, the following lists a form of organization, we can refer to.

Manifest.json put all the required files together, it is important to note that the files are compiled sequentially, so the dependent files are often placed before the actual script file, the following code, jquery.js the content Scripts in the Recorder.js and Player.js before.

{  "Manifest_version": 2, # plugin basic information"Name": "Myextension",  "description": "Myextension",  "Version": "1.0.0", # Popup Popup window file location"Browser_action": {    "Default_icon": "Img/icon.png",    "Default_popup": "Popups/popup.html"}, # Set content scripts and when to inject what type of page"Content_scripts": [{    "Matches": ["http://*/*", "https://*/*"],    "CSS": ["Styles/styles.css"],    "JS": [      "Bower_components/jquery/dist/jquery.min.js",      "Content-scripts/recorder.js",      "Content-scripts/player.js",]}], # Set Background's scripts"Background": {    "Scripts": [      "Bower_components/jquery/dist/jquery.min.js",      "Bg/background.js"]}, # Permissions for script"Permissions": [    "<all_urls>",    "Tabs",    "Storage",    "Unlimitedstorage"  ]}

Make a chrome plugin

To say more, not to do is useless. Let's start with a new Manifest.json file and copy the following code:

{  "manifest_version": 2,  "name": "Gtmetrix Analyzer Plugin",  "description": "This extension would analyze a page using Gtmetrix",  "version": "1.0",  "Browser_action" c13>: {   "Default_icon": "Icon.png",   "Default_popup": "Popup.html"  },  "Permissions": [   "Activetab"   ]}

There are a few points to note, browser_action This specifies the click on the plugin, the popup page and the plugin icon. Permission is to specify which URL is useful for this plugin, such as you can enter a specific domain name, then only under this domain name, the plugin is used.

Let's create a new popup.html page with the following code.

<!doctype html> page now!</button>  </body>
You may have noticed that I actually used a popus.js file, which is actually the script necessary to achieve the effect of clicking CheckPage, and then we create a new Popup.js file.
Ocument.addeventlistener (' domcontentloaded ',function() {  varCheckpagebutton = document.getElementById (' checkpage ')); Checkpagebutton.addeventlistener (' Click ',function() {chrome.tabs.getSelected (NULL,function(tab) {D=document; varf = d.createelement (' form '); F.action= ' HTTP://GTMETRIX.COM/ANALYZE.HTML?BM '; F.method= ' Post '; vari = d.createelement (' input '); I.type= ' hidden '; I.name= ' URL '; I.value=Tab.url;      F.appendchild (i);      D.body.appendchild (f);    F.submit ();  }); }, false);}, false);
Careful person is not difficult to find, the above code is to send a POST request to a website, checkpage actually registered the Click event, once the button is clicked, we will get to the current Activity tab and execute some JS code.
So how to test our plugins? Enter chrome://extensions in the Chrome Address bar, open developer mode, and then click Load Unpacked Extensions, select the corresponding directory is OK, if your plugin has changed, do not forget to click the Reload (ctrl+r) button.
The final effect is as follows:
Summarize
Because the chrome plug-in involves a lot of knowledge, so one can not finish, and if there is time, I will learn what I learned and you share, and this plugin is also my 2 days to learn, because the company to do a message automatically refresh the function, so I thought of the chrome plug-in, but unfortunately, the contest is finished, I did not win the prize, but also small vomit trough it.
Make the first chrome plugin