Oneself touch fish of time, see pirate novel 🤣 discovery always pop up indescribable advertisement page, think public place is not suitable, have what method can remove advertisement, total impossible every time all point eliminate button, and chorme browser plug-in can perfect realization this small demand.

The main structure

The Chorme browser plugin consists of several important files:As you can see, the Chrome browser plugin is just a page. There’s no pressure on the front end to get started, and that’s the most important thingmanifest.jsonFile. It is the configuration of the entire plug-in

{
	// The version of the manifest file, this must be written and must be 2
	"manifest_version": 2.// The name of the plug-in
	"name": "demo".// Version of the plug-in
	"version": "1.0.0".// Plug-in description
	"description": "Simple Chrome extension Demo".// Use the same size icon
	"icons":
	{
		"16": "img/icon.png"."48": "img/icon.png"."128": "img/icon.png"
	},
	// The background JS or background page will always be resident
	"background":
	{
		// If you specify JS, a background page will be generated automatically
		"page": "background.html"
		//"scripts": ["js/background.js"]
	},
	// Set the icon in the upper right corner of the browser. Browser_action, Page_Action or APP must be selected
	"browser_action": 
	{
		"default_icon": "img/icon.png".// The title of the hovering icon, optional
		"default_title": "This is a sample Chrome plugin"."default_popup": "popup.html"
	},
	// An icon that is displayed only when certain pages are opened
	/*"page_action": {"default_title": "pageAction", "default_popup": "popup.html"},*/
	// Need to inject the JS directly into the page
	"content_scripts": [{// "matches": ["http://*/*", "https://*/*"],
			// "
      
       " matches all addresses
      
			"matches": ["<all_urls>"].// Multiple JS are injected in sequence
			"js": ["Js/jquery - 1.8.3. Js"."js/content-script.js"].// JS injection can be arbitrary, but CSS must be careful, because careless can affect the global style
			"css": ["css/custom.css"].// Code injection time, optional value:
      Document_start, document_end, document_idle,
      // When the last one indicates that the page is free, the default is document_idle
			"run_at": "document_start"
		},
		// Just to demonstrate that Content-script can be configured with multiple rules
		{
			"matches": ["*://*/*.png"."*://*/*.jpg"."*://*/*.gif"."*://*/*.bmp"]."js": ["js/show-image-content-size.js"]}],// Permission request
	"permissions":
	[
		"contextMenus".// Right-click the menu
		"tabs"./ / label
		"notifications"./ / notice
		"webRequest"./ / web request
		"webRequestBlocking"."storage".// Plugin local storage
		"http://*/*".// A website accessible from executeScript or insertCSS
		"https://*/*" // A website accessible from executeScript or insertCSS].// A list of plug-in resources that can be accessed directly from a normal page
	"web_accessible_resources": ["js/inject.js"].// Plugin home page, this is very important, do not waste this free advertising space
	"homepage_url": "https://www.baidu.com".// Override the browser default page
	"chrome_url_overrides":
	{
		// Overrides the browser's default new TAB page
		"newtab": "newtab.html"
	},
	// plugin configuration page before Chrome40
	"options_page": "options.html".// Chrome40 after the plugin configuration page, if both write, the new version of Chrome only recognize the latter one
	"options_ui":
	{
		"page": "options.html".// Add some default styles, recommended
		"chrome_style": true.// The default value is false, indicating that the options page is opened in embedded mode; True: Opens the Options page in a new TAB
    "open_in_tab": true
	},
	// Register a keyword to the address bar to provide search suggestions. Only one keyword can be set
	"omnibox": { "keyword" : "go" },
	// Default language
	"default_locale": "zh_CN".// DevTools page entry, note that can only point to an HTML file, not JS file
	"devtools_page": "devtools.html"
}
Copy the code

Above is some configuration information for manifest.json. For more detailed configuration information, check out developer.chrome.com. Currently, however, you don’t need this much configuration information to develop the plug-in described above:

{
  "manifest_version": 2."name": "book_crx"."version": "1.0.0"."description": "Simple Chrome extension to read novels online without ads"."icons": {
    "16": "img/icon.png"."48": "img/icon.png"."128": "img/icon.png"
  },
  "background": {
    "scripts": ["js/main.js"]},"content_scripts": [{"matches": ["http://m.biqu6.cc/*"] // The corresponding novel website}}]Copy the code

Create a new plug-in directorybook_adTo create a file corresponding to the configuration information 而 main.jsRemove the ads from the website. Since this is a novel website, I chose to remove all the ads from the page rudelyimgElement, the code is simple

document.addEventListener('DOMContentLoaded'.function() {
  console.log('I was executed! ');
  Array.from(document.querySelectorAll('img')).forEach(ele= >{ ele.remove(); })});Copy the code

The installation

Once the development is complete, it’s a matter of installation:Click on the three dots in the upper right corner of Chrome -> More Tools -> ExtensionsOr access it directlyChrome: / / extensions/address Open developer modeThree button options appearClick “Load decompressed extension” to load directlybook_addirectoryAnd then we can see what happens

Forgive me I can’t put the effect, will be river * crab

This is a way to get rid of the ads.

The options options

A basic plug-in is implemented above, but it can only be used on one novel website. If we find other pirated novel websites, it will be useless, because currently only one website is configured

"content_scripts": [{"matches": ["http://m.biqu6.cc/*"]}]Copy the code

We can configure the options page to dynamically configure multiple sites by configuring the options. HTML page in the manifest.json file

"options_page": "options.html"."options_ui": {
    "page": "options.html"."chrome_style": true."open_in_tab": true
},
Copy the code

Create options.html in the root directory

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>options</title>
</head>
<body>
  <h1>options</h1>
  <input id="input" type="text" placeholder="Enter website">
  <button id="btn">add</button>
  <script src="js/options.js"></script>
</body>
</html>
Copy the code

Then, inchrome://extensions/Find the plug-in in the address, click Refresh; Click the extension icon on the right side of the browser to see [Options], click to jump to our ownoptions.htmlpagenewoptions.js

; (function(window.document){
  const S_KEY = '__book_ad__';
  document.querySelector('#btn').onclick = function() {
    const val = document.querySelectorAll('input') [0].value
    console.log(val)
    // Get the background side
    const page = chrome.extension.getBackgroundPage()
    page.getStore(S_KEY).then(site= > {
      console.log(site)
      if (Array.isArray(site)) {
        site.push(val);
        page.setStore(S_KEY, site);
        alert('Added successfully! ')}else {
        page.setStore(S_KEY, [val]);
        alert('Added successfully! ')}})}})(window.document)
Copy the code

content_scripts

Content_scripts option is the content script that is executed when the configuration page loads. Here the logic is moved to content_scripts.js, where manifest.json is configured first

"content_scripts": [{"matches": ["<all_urls>"]."js": [
      "js/content_scripts.js"]."run_at": "document_end"}].Copy the code

New content_scripts. Js

console.log('I was executed! ');
// clearStore()
getStore('__book_ad__').then(sites= > {
  console.log(sites);
  if (!Array.isArray(sites)) return;
  sites.forEach(site= > {
    if(location.href.includes(site)) { main(); }})})function main() {
  const $imgs = document.querySelectorAll('img');
  const $bingo = document.querySelectorAll('bingo');
  const $object = document.querySelectorAll('object');
  Array.from($imgs).forEach(ele= > {
    ele.remove();
  })
  Array.from($bingo).forEach(ele= > {
    ele.remove();
  })
  Array.from($object).forEach(ele= >{ ele.remove(); })}function setStore(key, value) {
  return new Promise(resolve= >
    chrome.storage.local.set({ [key]: value }, resolve)
  );
}

function getStore(key) {
  return new Promise(resolve= > {
    chrome.storage.local.get(key, item= > resolve(item[key]));
  });
}

function clearStore() {
  return new Promise(resolve= > {
    chrome.storage.local.clear(() = > resolve());
  });
}
Copy the code

Here we use Chrome. store to store url configuration. Using this option requires permissions to be configured in the manifest.json file

  "permissions": [
    "storage"
  ]
Copy the code

Note: The data stored in Chrome. storage is not visible in the developer’s palette tool, so I’ll use code to clean up the data here.

packaging

Click the “Package extensions” buttonSelect directory package build.crxFile, but it needs to be published to the Google app

conclusion

Plug-in is just a simple use, there are more detailed knowledge points can help plug-in to achieve more functions. This time, I found the need point in my own life and used technology to solve it. After their own use of Vue to try to rebuild a source here.

Note:useCDNThe loader will pop up the following errorNeed to be inmanifest.jsonAdd fields

"content_security_policy": "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self';"
Copy the code