Basic introduction to chrome plugin writing

Basic introduction to chrome plugin writing

 

 

For more, please see: http://igeekbar.com/igeekbar/post/331.htm

 

#storyJAVASCRIPT CHROME _

 

As a programmer, how can you not write chrome plug-ins [laughs]  
So today I will teach you how to write the most basic chrome plug-ins, no, to be precise, learn from each other and learn together.  
(I won't tell you that I also just learned it not long ago!)

 

Basic knowledge:

First of all, we need to know which files a chrome plugin needs is actually very simple 

• Configuration (entry) file  manifest.json
• xx.html
• xx.css
• xx.js
• picture

This is OK. If you are a front-end siege lion or a programmer who reads this article again, then congratulations, your learning difficulty will be very small, and it will be easy to learn (of course I mean is the foundation, the most basic spelling)

Due to the organization of html, css, js and files, like ordinary web development, writing Chrome extensions is mainly about writing manifest files and debugging extensions.

manifest.json

• Basic properties

  Including the extension's name (name), version (version), description (description), icon location (icons) and manifest version (manifest version) and other information. name, version and manifest 
  version are required and manifest_version must be 2 

  (don't ask me why it's 2, I don't know)

  Take a chestnut :

  {
  //it is necessary
  "name": "coding bubbling like crazy demon",
  "manifest_version": 2,
  "version": "1.0",
  //this is optional
  "description": "coding like script"
  }

  Markup

• browser_action

  The browser action specifies that the extension's icon is placed in the Chrome toolbar. It defines the location of the extension icon file (default icon), the floating prompt (default title), and the location of the page displayed by clicking the extension icon (default popup) . Browser actions can be used in chrome An icon is added to the right of the address bar of the main toolbar. As an extension of this icon, a browser action icon can also have tooltip, badge and popup. If you want to create an icon that is not always visible, use the page action instead of the browser action. 
   
  

  take a chestnut

  {
   ...
   "browser_action": {
       "default_icon": "1.png",
       "default_title": "I'm a like maniac",
       "default_popup": "popup.html"
   },
   ...

  Markup

  }

• Permissions is awesome, it's more important 
  

  The permissions property is an array that defines the permissions that the extension needs to apply to Chrome, such as requesting data across domains through XMLHttpRequest, accessing browser tabs (tabs), getting the current active tab (activeTab), browser notifications (notifications), Storage, etc., can be added as needed. A set of permissions that the extension or app will use. Each permission is one of a list of known strings, such as geolocatioin or a matching pattern, to specify one or more hosts that can be accessed. Permissions can help limit the danger if your extension or app is compromised. Before installing some permissions, the user will be informed if an extension API requires you to declare a permission in the manifest file, generally, the API documentation will tell how to do it. For example, the Tabs page tells you to declare a tabs permission like this. This is part of the permission settings for an extended manifest file. 
   
   
  

  take a chestnut

  {
      ...
      "permissions": [
          "tabs",
          "bookmarks",
          "http://www.blogger.com/",
          "http://*.google.com/",
          "unlimitedStorage",
          ...
       ],
       ...
  }

  Markup

• background

  Extensions often use a single long-running script to manage some tasks or state. background can make the extension reside in the background. It is more commonly used to specify the sub-property scripts, which means that a page containing all the specified scripts is automatically created when the extension starts. 
  

  For example { ... "background": { "scripts": ["myscript.js"] }, ... } 
  

• content_scripts

  Content scripts are javascript scripts that run within web pages. By using the standard DOM, they can obtain detailed information about the pages visited by the browser and can modify this information.

  For example, { ... "content_scripts": [ { "matches": ["https://coding.net/*"], // this is required "js": ["jquery.min.js"] , // this is optional "css": ["xx.css"], // this is optional... } ] ... } 
  

  Using the content scripts field, an extension can inject multiple content scripts into a page; each content script can include multiple javascript scripts and css files.

   Simply put, content_scripts will match the url according to the matches rules you define inside it , and then inject the js and css you specified into the successfully matched url page, etc.

Well, after learning these, you can make a simple chrome plugin. One thing to note is that content scripts are injected directly after opening the page. You don't need background and permissions, and if you want to click on your plugin icon and then execute the injection Then you must use background and permissions  to inject code into the page, the extension must have cross-origin permissions, and the chrome.tabs module must be available. These permissions can be obtained by declaring them in the permissions field of the manifest file. Once the permissions are set, javascript scripts can be injected by calling executeScript(). If you want to inject css, you can call insertCSS(). For example, chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{code:"document.body.bgColor='red'"}); }); 
 

In this way, you can click the icon to change the background color of the corresponding webpage to red . However, sometimes our code may be too much, and it is not beautiful to write it directly in executeScript(), then we can create a new file for example /* action.js */ document.body.bgColor='red'; alert('Changed background color'); 
 
 

/* main.js */ chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"action.js"}); });

Summarize

Finally, let's summarize what we have learned above and integrate all the code together. Take one of my simple basic plugins as an example: directory structure: 

---- plugin folder -------- manifest.json -------- jquery.min.js -------- like.js -------- myscript.js 
 
 
 

• manifest.js

  { "name": "coding冒泡点赞狂魔", "manifest_version": 2, "version": "1.0", "description": "coding点赞脚本", "browser_action": { "default_icon": "1.png" "default_title": "我是点赞狂魔" }, "permissions": [ "tabs", "https://coding.net/*" ], "background": { "scripts": ["myscript.js"] }, "content_scripts": [ { "matches": ["https://coding.net/*"], "js": ["jquery.min.js"] } ] }

• myscript.js

  chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"like.js"}); });

• like.js

  jQuery('.heart.icon.empty').click(); console.log('已点赞'); console.log(jQuery('.heart.icon.empty').click()); alert('已点赞 '+ jQuery('.heart.icon.empty').click().length + '条');

Reference link

• 360 extremely fast browser application open platform (this document is slightly old)
• Google's official documentation (your English should be good enough)
• Electronic version: "Chrome Extension and Application Development"

http://igeekbar.com/igeekbar/post/331.htm