The Chrome plugin is surprisingly simple once you understand how it works and how it works. It is made up of part HTML, part Js, and a json file called manifest.json. This means you can implement it using whatever JS framework you are best at.

If you are new to the Chrome plugin and want to try writing one, the following article will guide you and try to understand how the Chrome plugin works. This article will cover each piece of architecture, how it relates to each other, and the general form of the plug-in.

architecture

The files in the Chrome plugin can be roughly divided into two parts: The files that actually exist in Chrome plug-ins, and are application-level, such as Chrome Extension Scripts as shown above, and the files Injected into the Dom of each web page (such as Content Scripts or Injected Scripts). These files are stored in manifest.json, and Chrome automatically identifies the role of each file.

There is only one copy of popup and background at any one time, by contrast, if you have multiple tabs (and by Tab I mean tabs in Chrome, I am a window page), so Content Scripts and Injected Scripts would run in each Tab, i.e., across tabs. Of course, you can specify which Tab to inject Scripts into, that is, the injection operation is optional.

Here are some details on how they work:

Manifest.json

  • This Json file is specially written in a structured way: I gathered the backgrounds of the actors, popups, Content scripts and injected scripts.
  • Set the extension, such as Permission.
  • Set basic information about the extension.

Background

  • Javascript files always run in the background (in older versions of Chrome, background was AN HTML file with Javascript embedded).
  • No interface is displayed.
  • Have access to Chrome application level commands.
  • Have access to all Chrome apis
  • Clicking the plug-in icon displays Html and javascript.
  • Also has application-level permissions (same as background)
  • Trigger only when the Chrome plugin icon is clicked.
  • Have access to all pop-up Chrome apis.

Content Scripts

  • Have access to a portion of the Api (such as listening for messages from Backgorund)
  • Full access to the page Dom, but no access to any Window-level objects (such as global variables), and no access to frames; This is because of security restrictions.
  • 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

  • Like Contente Scripts, you only have partial ACCESS to the Api
  • Injection into the current Tab page, does not communicate with the plug-in.

correlation

The connection between them, I think, is very clear once you understand the overall structure.

Sections at the application level can have access to each other. Such as Popup file can use chrome. The extension. GetBackgroundPage () access to the inside of the background, it is as if the Backbone view can access their Model and Collection.

Content Scripts exist in each separate Dom page and communicate with background and popup as messages. In particular, it can use chrome. Tabs. SendMessage and chrome. Runtime. OnMessage. AddListener messages to each other. It’s a lot like Backbone’s event system.

Injected Scripts differs from Content Scripts in that it cannot listen or send messages to other Chrome plugin parts.

structure

Organize your Chrome plugin so that you can better understand the different functions of different files. Different projects can have similar organizational structures. Here is a list of organizational forms for your reference.

Manifest.json puts all the required files together. Note that files are compiled in sequence, so dependent files are often placed before the actual script file. Jquery. js is real content scripts in the recorder. Js and player.js before.

"Name ": "MyExtension", "description": "MyExtension", "version": {"default_icon": "img/icon.png", "default_popup": "Popups /popup.html"}, # set content scripts and when to inject what type of page "matches": [{"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 scripts" background": {"scripts": [" bower_components/jquery/dist/jquery. Min. Js ", "bg/background. Js]}, # script permissions" permissions ": [ "", "tabs", "storage", "unlimitedStorage" ] }

Make a Chrome plugin

No matter how much you say, it’s no use not doing. Let’s create a new manifest.json file and copy the following code:

{ "manifest_version": 2, "name": "GTmetrix Analyzer Plugin", "description": "This extension will analyze a page using GTmetrix", "version": "1.0", "browser_action": {"default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }

A few things to note: Browser_action specifies the page that pops up when the plugin is clicked and the plugin’s icon. Permission specifies which urls are useful for the plugin. For example, you can enter a specific domain name, and the plugin is only useful under that domain name.

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

  
    GTmetrix Analyzer
    
  
  
    
GTmetrix Analyzer

    Check this page now!

You may have noticed that I’m actually using a popus.js file, which is the script I need to create for checkPage. Let’s create a popup.js file.

ocument.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('checkPage');
  checkPageButton.addEventListener('click', function() {

    chrome.tabs.getSelected(null, function(tab) {
      d = document;

      var f = d.createElement('form');
      f.action = 'http://gtmetrix.com/analyze.html?bm';
      f.method = 'post';
      var i = d.createElement('input');
      i.type = 'hidden';
      i.name = 'url';
      i.value = tab.url;
      f.appendChild(i);
      d.body.appendChild(f);
      f.submit();
    });
  }, false);
}, false);

Once the button is clicked, we will retrieve the active Tab and execute some javascript code.

So how do we test our plug-in? Enter Chrome :// Extensions in the Chrome address bar, open developer mode, then click Load the extracted extension, select the appropriate directory and click reload (Ctrl+R) if your plugin has been modified.

The final effect is as follows:

cnblogs.com/blog/567748/201603/567748-20160321001059084-295322205.png” alt=””>

conclusion

Because Chrome plug-ins involves a lot of knowledge, so a couldn’t finish speak, later if you have time, I will put what I learn and share, this plugin is also I learn these 2 days, because the company to do a automatically refresh the information function, so we thought about the Chrome plug-ins, but unfortunately, competition, I didn’t win, Make a little fun of it, too.