Google Chrome plugin development, DIY, clothed

Because usually use chrome on the Internet, but always feel in addition to the speed, concise outside there is always a place to meet my needs, and then find plug-ins ... Later found that although the bulk of the plug-in but find a satisfactory is not an easy thing, used in the time to find plug-ins can write a, so, the summer began to write a few leisure time, and then in the Application Center intermittent release, these plug-ins were originally for their own use, But there are a few users who specifically ask me to ask for their needs.

From the beginning do not understand to now 32 can play one, walk a little long way, today here write down from development to release simple process, are very simple knowledge

An available plugin includes at least one Manifest.json and one JS file

Manifest.json

Each plug-in has a Manifest.json file that is equivalent to main () in C, and the file structure is a typical JSON object:

 1 {2 "name": "Apply First Name", 3 "description": "Application Description, later published to the mall, see the name after the second see the message", 4 "Version": "1.0", 5 "background": {"Scrip TS ": [" List.js "," Background.js "]},//files running in the background, such as the file of the corresponding plug-in message function, etc. 6" permissions ": [7" Tabs "," Bookmarks "," http://*/* " , "https://*/*"//Plugin Run "Location", tab page, bookmark page, webpage etc 8], 9 "browser_action": {Ten "name": "Click to change the icon ' s Color "," Default_title ":" The cue message that appears when you point to the plug-in icon, you can have a newline escape character such as \ n ————————————— \ n the first line \n the second row \n the third row "},13" icons ": {" + ":" I Con16.png "," "": "Icon48.png", "" ":" Icon128.png "},//Configure the plug-ins to display the icon, including in the plug-in management page, the App Store display icon, etc." Options_page ":" Options.html ",//Configuration page, no option page without setting the" manifest_version ": 2,//This A must be 2, other values in the resulting plugin does not support the new version of Chrome browser "web_accessible_resources": ["Greenrain.png", "Test.css", "icon100.png"],//plug-in runtime, The resource file that you want to use or reference on the page must be marked here, otherwise chrome does not allow access to the "content_scripts": [18 {////plugins are imported immediately when the plugin starts to run, the necessary JS files are added here to set the "matches ": [" http://*/* "," https://*/* "],20" CSS ": [" Test.css "],21" JS ": [" Jquery-1.7.2.min.js "," Xxxx.js "]22}23]24} 

This document has a point to note: that is, remember this document do not add comments ... When the official release is not prompt, but the hint is not successful, depressed (//and/**/are not, the above code has comments is to illustrate the function. Do not add comments ah do not add comments ah ...

Xxxx.js

The page operations that need to be performed are done in this file, typically including DOM operations, message requests, and so on

1 (function () 2 {3     var profile = [],test=10; 4     alert ("plugin is Running"); 5     chrome.extension.sendRequest ({method: "GE Tprofile ", number:test}, Function (response) 6     {//Initiate request, get basic Configuration 7         if (response.data! = undefined && Response.data = "") 8         {9             alert ("Plugin received message");         }11     }12}) ();

Background.js

Typically used to handle receiving messages, operation plug-in run data, browser behavior calls, etc., than the label display, reminders.

 1 (function () 2 {3 Chrome.browserAction.setIcon ({path: "Img/icon0.png"});//Icon 4}); 5 var min = 0, max = ten, current=0;     6 function Updateicon (number) 7 {8 Chrome.browserAction.setIcon ({path: "icon" + current + ". png"});//Toggle Icon 9 10  if (number) {one if (number = = 0) Number = ""; Chrome.browserAction.setBadgeText ({text:string (number)     });//Update icon hint text}14 else{15 chrome.browserAction.setBadgeText ({text:string (current)});//hint Transparency text 16 }17 chrome.tabs.executeScript (NULL, {code: "document.getElementById (' Testdom '). style.opacity =" + parseint (curren T)/10 + ";"}); /Click on the icon to instantly execute the script to adjust the transparency of current++;21 if (Current > Max): {current = min;24}25}26 Chrome.bro WserAction.onClicked.addListener (Updateicon);//Add Listener Event Chrome.extension.onRequest.addListener (function (Request , sender, Sendresponse) 28 {//Return request data, if (Request.method = = "GetProfile"), {to var counter = Request.numb  Er;32       Updateicon (counter); Sendresponse ({"Test": "Result"}); 34}35}); 

Note: The above code description is used, may be wrong

Configuration page

Usually set the user to save the data, someone with a cookie, I prefer to use localstorage storage, regardless of browser compatibility issues.

About Publishing

Chrome App Store publish app no charge is already past, now want to release a plug-in to take 5 US knife facilitation payments to Google, "this road is I open, this tree is I planted, want to ...", who let us in people's way to walk, obediently pay money. However, there is a question to remind: the mainland is not directly pay the bill, select the country to choose China, Hong Kong, credit card is not full support, I only know the success of payment with CMB. After the release of course, I hope that users more and more, but found that the promotion of this job is really not.

Here are a few of the plugins I made, the same as the code of farming you may also be useful, but also to make a small advertisement;-)

First plug-in: "Web page words"

Internet time a little regret feeling, and then want to spend the time on the internet to recite a few words, find a long time not to find the right plug-in, get, their hands, so the first plug-in was born. Click the plug-in icon to adjust the transparency, the word from the screen a flash, the mouse set a shadow invisible, do not delay operation, provide the Word table can not meet the need to also configure their own, Britain and France, Italy Day, remind of what all kinds of things casually stuffed.

Second plugin: "Spotlight"

This is the completion of the first plug-in temperature is not dispersed, the plug-in can allow users to devote themselves to read a part of the Web page, with the mouse to pick up the DOM, the rest of the cover with masks, want to see other places can be easily restored, plus a shortcut key and video highlighting, in the App Store has a "turn off the Lights The user has reached dozens of W! I found that this is more useful than his, but will not be promoted, the user not a few ... This plugin is available in both Chinese and English versions.

You can do this:

Third plugin: "Block Weibo ads"

The one that was just finished yesterday. Recently found that the Sina Weibo has no previous comfortable, very like the users are special in the hair all kinds of ads, recommended attention, it is to take a distraction, the result of a distracted, an afternoon to fix, with good, for the advertising microblogging recognition rate is still quite high. Use on the found that a few "global xxx" really disgusting, all kinds of ads, and some even all are, cancel attention.

Finally I hope this article will be useful to you.

Google Chrome plugin development, DIY, clothed