Chrome plug-in development quick start – Baidu AD blocking plug-in

This section is for study only. Delete it within 24 hours after downloading

This lecture content

• Learn about Chrome plug-in development
• 2. This section describes how to configure the Chrome plug-in manifest

• 3. Inject CSS combat (let the page gray)
• 4. Inject JS script to combat (inject and pop alert prompt)

• 5. Analyzed Baidu ads and wrote plug-ins to delete ads

1. How to develop a Chrome plugin

Chrome will use the manifest.json file as the plug-in description file, and folders containing this file will be considered plug-ins

2. Elaborate on the manifest file

{
  "manifest_version": 2.// Listing version number
  "name": "Plug-in name"."version": "1.8.6"./ / version number
  "description": "Description"."author": "The author"."icons": {
    / / icon
    "16": "xxx.png"."48": "xxx.png"."128": "xxx.png"
  },
  // Only one browser_action and page_action can be added
  "browser_action": {
    // Browser behavior, all pages are valid
    "default_icon": "xxx.png".// The image of the icon
    "default_title": "Title"."default_popup": "html/popup.html"
    // After you click the icon, the page is displayed
  },
  "page_action": {
    // Page behavior, which only takes effect under certain pages
    "default_icon": {
      "24": "xxx.png"."38": "xxx.png"
    },
    "default_popup": "xxx.html"."default_title": "Page title"
  },
  "background": {
    // Background scripts can be simply understood as servers
    "scripts": [
      "xxx.js",]},"devtools_page": "xxx.html"."content_scripts": [
    // Inject the script, CSS, etc
    {
      "js": [
        "xxx.js"]."css": [
        "xxx.css"]."matches": [
        "<all_urls>"
      ]
      
      
        indicates all
      }]."permissions": [
    // The required permissions
    "cookies"."http://*/*"."management"."tabs"."contextMenus"]}Copy the code

The important ones are: content_scripts: describes the file to be injected, and describes which pages to inject and when; Browser_action and page_action: you can create a window and create a page in the window. Browser_action is the browser action and page_action is the page action. Only one of these two can exist. Devtools_page: You can create Windows in DevTools and use the DevTools API provided by Chrome. Background: can be simply understood as the server, can be used for communication, such as DevTools and injection script communication;

content_scripts

{
  "content_scripts": [{"js": [
        "xxx.js"]."css": [
        "xxx.css"]."run_at": "document_end"."matches": [
        "https://*.baidu.com/*"]]}}Copy the code

The field name	meaning
js	The JS file to inject
css	The CSS file to inject
run_at	When is document_end document_start document_IDLE injected
matches	<all_urls> means it applies to all websites

Creating a plug-in

• Create a new folder and create a style. CSS file and an index.js file in the folder. Create a manifest.json file in the folder with the following contents:

{
  "manifest_version": 2."name": "Baidu AD blocker"."version": "0.0.1"."description": "Block Baidu ads"."icons": {},"author": "Your name"."content_scripts": [{"js": [
        "index.js"]."css": [
        "style.css"]."run_at": "document_end"."matches": [
        "https://*.baidu.com/*"]]}}Copy the code

• Open Chrome -> Menus -> More Tools -> Extensions

• Open developer mode in the upper right corner and drag your plugins folder directly into it

• Note that the code needs to be refreshed here every time you change it, otherwise Chrome will not reload

Complete injection CSS combat, let the page gray

Write the following in style.css

body {
  filter: grayscale(1);
}
Copy the code

Refresh reload plug-in file, and open Baidu can see the whole page is gray

Complete injection JS script combat, injection and pop-up alert prompt

Write the following to index.js

alert("Plug-in in effect");
Copy the code

Refresh the web page and see the pop-up prompt

Analysis of Baidu advertising, to achieve the shielding function

Search for any content, and you’ll find that the ads on the search page are in the first div with an ID called content_left and that div has no ID attribute, whereas normal search results have ID attribute

You can write the following code in the plug-in:

const content_left = document.getElementById("content_left");
if (content_left && content_left.children > 0 && !content_left.children[0].id) {
  content_left.children[0].remove();
}
Copy the code

To achieve the purpose of blocking search results advertising

How to remove dynamically loaded ads

Randomly open a baidu Encyclopedia entry, found some annoying ads on the right, and our search results have nothing to do with

Use the same method to analyze the two ads. The right side of the AD is the element className called right-ad. The right side of the AD is the element whose ID is side_box_unionAd

Write code to remove it

// Image ads on the right side of the encyclopedia
const right_ad = document.getElementsByClassName("right-ad");
if (right_ad[0]) {
  right_ad[0].remove();
}

// The disgusting advertisement on the right side of 100
const side_box_unionAd = document.getElementById("side_box_unionAd");
if (side_box_unionAd) {
  side_box_unionAd.remove();
}
Copy the code

It didn’t work because both ads were loaded dynamically, and our JS script was executed when the document was created

For both types of ads, we can listen for DOM changes to complete the removal

Here are two ways to listen for DOM changes. The DOMSubtreeModified event is provided in DOM2 and the MutationObserver is written into the browser standard API in DOM3

// Listen for dom structure change DOM2
document.body.addEventListener("DOMSubtreeModified".() = > {
  console.log("DOMSubtreeModified");
});

// Listen for dom structure change DOM3
const observer = new MutationObserver(() = > {
  console.log("MutationObserver");
});

observer.observe(document.body, {
  childList: true.// attributes: true,
  subtree: true});Copy the code

We use MutationObserver to listen for changes in the DOM tree

Set childList and subtree to true to listen for structural changes to child nodes and their descendants

The callback function is passed when the MutationObserver is created

Pass the method to remove the AD in the callback function

Reload the plugin and refresh the encyclopedia page to find that the AD has been removed

/** * remove asynchronously loaded ads */ by listening for changes in the DOM tree
function removeAdAsync() {
  // Image ads on the right side of the encyclopedia
  const right_ad = document.getElementsByClassName("right-ad");
  if (right_ad[0]) {
    right_ad[0].remove();
  }

  // The disgusting advertisement on the right side of 100
  const side_box_unionAd = document.getElementById("side_box_unionAd");
  if(side_box_unionAd) { side_box_unionAd.remove(); }}// Listen for dom structure change DOM2
// document.body.addEventListener("DOMSubtreeModified", removeAdAsync);


// Listen for dom structure change DOM3
const observer = new MutationObserver(removeAdAsync);

observer.observe(document.body, {
  childList: true.// attributes: true,
  subtree: true});Copy the code

New thinking

Here are three ways to remove ads from video sites that you can try and make plug-ins for

Iqiyi video advertising

$(".skippable-after").click()
Copy the code

Tencent Video Ads

$(".txp_ad").find("txpdiv").find("video") [0].currentTime = 100;
$(".txp_ad").find("txpdiv").find("video") [1].currentTime = 100;
Copy the code

Youku video advertisement

$(".h5-ext-layer").find("div").remove();
$(".control-play-icon").click();
Copy the code