Write a Google plugin to customize existing site content

Background: The company project to finish the gap period, is always very boring, always can not always look at the technical documents, always want to relax, for example, look at the network novel (Ps: Most of the Web novel Web sites are advertising, and advertising shielding can not be completely blocked off, And the style of the site look at the Technology Forum technology blog and other sites, such as the site is not the same, this time how to disguise themselves in the look at the document? The answer, of course, is to write a plugin to get rid of the style of these sites and screen out the ads blocked by the ad screen plugin ~)
Body:
1. Google's plugin must have a file is the main portal file of the Manifest.json plugin, additional resource files themselves as needed.

For example, I wrote this plugin is very simple several files, Manifest.json, custom.css, icons folder (storage icon)

2.manifest.json File Contents

1 {    2"Content_scripts": [ {    3"CSS": ["Custom.css"],    4"All_frames":true,    5"Matches": ["http://s.guipp.com/*" ]    6    } ],7"Permissions": [8"Tabs", "http://*/*", "https://*/*"9   ],Ten"Browser_action": { One"Default_icon": { A"+": "Icons/tiantiansifangmao-19.png", -"A": "Icons/tiantiansifangmao-38.png" -       }, the"Default_title": "Ghost blows [http://s.guipp.com/]-site Custom Style" -    }, -"Icons": { -"$": "Icons/tiantiansifangmao-128.png", +"+": "Icons/tiantiansifangmao-16.png", -"+": "Icons/tiantiansifangmao-32.png", +"$": "Icons/tiantiansifangmao-48.png", A"Up": "Icons/tiantiansifangmao-64.png" at   },  -"description": "Custom.css",     -"Name": "Custom CSS",     -"Version": "1.0",     -"Manifest_version": 2 -}

View Code

Where content_scripts: Define the content of the plug-in script, can be a CSS, or js,matches to represent the rules of the site, here I only match a site, the benefit is that other sites outside this site are not affected,

Permissions: Represents the permissions that the plug-in can use.

Browser_action:google Browser plugin area display definition, Default_icon: Plugin area Display icon, Default_title: Plug-in area display title, that is, the text displayed when the mouse pauses,

Icons:google Plugin Management page displays the icon,

Description: Plugin descriptive text,

Name: Plug-in Names ( required ),

Version: Plug-in versions ( required ),

Version number of the Manifest_version:manifest file itself ( required )

Specific Manifest.json file The meaning of each key, refer to the 360 Speed browser extension development documentation

3.custom.css file contents (mostly changes the style of the browser scroll bar)

1 /*-scroll bar default display style –*/    2::-webkit-scrollbar-thumb{3background-color: #018EE8; 4 height:50px; 5outline-offset:-2px; 6 outline:2px solid #fff; 7-webkit-border-radius:4px; 8 border:2px solid #fff; 9 }     Ten      One /*-mouse click on scroll bar display style –*/     A::-webkit-scrollbar-thumb:hover{ -background-color: #FB4446;  - height:50px;  the-webkit-border-radius:4px;  - }      -      - /*-scroll bar size –*/     +::-webkit-scrollbar{ - width:15px;  + height:8px;  A }      at      - /*-scroll box background style –*/     -::-webkit-scrollbar-track-piece{ -background-color: #fff;  --webkit-border-radius:0;  - }   in  -::-webkit-scrollbar-thumb:active{ to height:50px;  +Background-color: #000;  --webkit-border-radius:4px;  the }   *  $ . story Li a{Panax NotoginsengDisplay:inline!important; - } the  + body{ APadding-top:0!important; the } +  -#fix-menu, #fix-tools{ $Position:relative!important; $ } -  -#app-Wrap { thepadding:0 150px!important; -}

View Code

4. The most important step is to---packaging

Customize and control Google Chrome--More tools--Extensions---> Developer mode---> Package extender

Note: A problem is encountered here

is no private key file, if this is the first time to package the extension, it is necessary to put our extension file directory to the root directory of the disk, and then do not fill in the private key file, click the Package Extender button to package successfully.

This is a Chrome_plugins.pem file in the root directory of the disk, this is the private key file, and then in the package extension can not be stored in the disk root directory and directly to the Chrome_ PLUGINS.PEM can be packaged successfully on the private key selection.

Write a Google plugin to customize existing site content