javascript-Chrome扩展实例（二）

 1{
 2 "name": "扩展名称",
 3 //...
 4 "content_scripts": [
 5   {
 6     "matches": ["https://*.github/*"],
 7     "css": ["my-styles.css"],
 8     "js": ["content-script.js"],
 9     "run_at": "document_idle",
10     "match_about_blank": false,
11     "match_origin_as_fallback":true
12   }
13 ],
14 //...
15}

 1{
 2  "manifest_version": 3,
 3  "name": "Reading time",
 4  "version": "1.0",
 5  "description": "估计阅读文章所需要的时间",
 6
 7  "icons": {
 8    "16": "images/icon-16.png",
 9    "32": "images/icon-32.png",
10    "48": "images/icon-48.png",
11    "128": "images/icon-128.png"
12  },
13  "content_scripts": [
14    {
15      "js": [
16        "scripts/content.js"
17      ],
18      "matches": [
19        "https://surprisedcat.github.io/studynotes/*",
20        "https://surprisedcat.github.io/projectnotes/*"
21      ]
22    }
23  ]
24}

 1//content_script.js
 2
 3//获取网页中的文章<article>标签（并不是所有网页都有，我的博客中有这个标签）
 4const article = document.querySelector("article");
 5//判断是否成功，不成功则返回null，也可能返回多个，为了方便我们先不考虑
 6if (article) {
 7    const text = article.textContent;//获取标签中文本
 8    //分中英文统计字符
 9    //中文，/\p{Unified_Ideograph}/ug 匹配所有中文
10    const chineseChar = text.matchAll(/\p{Unified_Ideograph}/ug);
11    const chineseNum = [...chineseChar].length;//计算文本长度
12    //英文，去除中文后再匹配
13    const englishChar = text.replace(/[^\w-]/g, ' ').matchAll(/[^\s]+/g);
14    const englishNum = [...englishChar].length;//计算文本长度
15    //假设我们每分钟阅读中文400个字，英文300单词，计算阅读时长
16    const readingTime = Math.round(chineseNum / 400+ englishNum / 300);
17    //创建<p>元素存放结果
18    const badge = document.createElement("p");
19    badge.textContent = `⏱️ ${readingTime} min read`;
20
21    //在<h1>标题后面添加阅读时间的<p>元素
22    const heading = article.querySelector("h1");
23    heading.insertAdjacentElement("afterend", badge);
24}

1https://surprisedcat.github.io/studynotes/*
2https://surprisedcat.github.io/projectnotes/*

1reading_time
2   ├─manifest.json
3   ├─images
4   │    ├─icon-128.png
5   │    ├─icon-16.png
6   │    ├─icon-32.png
7   │    └─icon-48.png
8   └─scripts
9        └─content.js

 1{
 2  "manifest_version": 3,
 3  "name": "Focus Mode",
 4  "description": "Enable reading mode on Chrome's official Extensions and Chrome Web Store documentation.",
 5  "version": "1.0",
 6  "icons": {
 7    "16": "images/icon-16.png",
 8    "32": "images/icon-32.png",
 9    "48": "images/icon-48.png",
10    "128": "images/icon-128.png"
11  },
12  "background": {
13    "service_worker": "background.js"
14  },
15  "action": {
16    "default_icon": {
17      "16": "images/icon-16.png",
18      "32": "images/icon-32.png",
19      "48": "images/icon-48.png",
20      "128": "images/icon-128.png"
21    }
22  },
23  "permissions": ["scripting", "activeTab"]
24}

 1//background.js
 2
 3//初始状态下，状态为OFF
 4chrome.runtime.onInstalled.addListener(() => {
 5  chrome.action.setBadgeText({
 6    text: "OFF",
 7  });
 8});
 9
10//添加监听事件，点击扩展action图标
11//tab默认指当前的tab页面
12chrome.action.onClicked.addListener(async(tab) => {
13  //获取当前badge状态
14  const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
15  //点击后的状态总是和之前相反
16  const nextState = prevState === 'ON' ? 'OFF' : 'ON';
17  //更改badge状态的文字
18  await chrome.action.setBadgeText({ tabId: tab.id, text: nextState });
19})

 1//background.js
 2
 3//初始状态下，状态为OFF
 4chrome.runtime.onInstalled.addListener(() => {
 5    chrome.action.setBadgeText({
 6        text: "OFF",
 7    });
 8    });
 9
10//目标URL
11const CSDN_url = 'https://blog.csdn.net/';
12    //添加监听事件，点击扩展action图标
13    //tab默认指当前的tab页面
14chrome.action.onClicked.addListener(async(tab) => {
15//如果以CSDN_URL开头则执行内容脚本
16    if(tab.url.startsWith(CSDN_url)){
17        //获取当前badge状态
18        const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
19        //点击后的状态总是和之前相反
20        const nextState = prevState === 'ON' ? 'OFF' : 'ON';
21        //更改badge状态的文字
22        await chrome.action.setBadgeText({ tabId: tab.id, text: nextState });
23        //根据Badge状态文字执行注入CSS和取消注入CSS
24        if(nextState === "ON"){
25            await chrome.scripting.insertCSS({//注入CSS
26                files: ["css/csdn.css"],
27                target: { tabId: tab.id }
28            });
29        } else if (nextState === "OFF") {
30            await chrome.scripting.removeCSS({//取消注入CSS
31                files: ["css/csdn.css"],
32                target: { tabId: tab.id }
33            });
34        }
35    }
36})

 1/*CSDN 专注模式样式表*/
 2/*URL:  *blog.csdn.net/*   */
 3#csdn-toolbar{display: none}
 4#mainBox > aside{display: none}
 5#recommend-right{display: none}
 6#toolBarBox{display: none}
 7#mainBox > main > div.first-recommend-box.recommend-box{display: none}
 8#mainBox > main > div.second-recommend-box.recommend-box{display: none}
 9.csdn-side-toolbar {display: none}
10#pcCommentBox{display: none}
11#mainBox > main > div.recommend-box.insert-baidu-box.recommend-box-style{display: none}
12#mainBox > main > div.template-box{display: none}
13#mainBox > main > div.blog-footer-bottom{display: none}
14#blogHuaweiyunAdvert > div{display: none}
15#blogColumnPayAdvert{display: none}
16body > div.main_father.clearfix.d-flex.justify-content-center{width: 100%;background-color: aliceblue}
17#mainBox{width: 100%;background-color: aliceblue}
18#mainBox > main{width: 100%;background-color: aliceblue}
19#blogExtensionBox{display: none}
20#js_content > pre{display: none}
21/*使用内联样式表以及!important的顽固分子*/
22/*一般情况不要再扩展中使用!important*/
23#treeSkill{display: none!important}
24#pcCommentBox{display: none!important}
25#recommendNps{display: none!important}
26body.nodata{background: none!important;background-color:aliceblue!important;background-image: none!important}

 1focus_mode
 2├─background.js
 3├─manifest.json
 4├─css
 5│   └─ csdn.css
 6└─images
 7    ├─icon-128.png
 8    ├─icon-16.png
 9    ├─icon-32.png
10    └─icon-48.png

 1//...
 2{
 3  "commands": {
 4    "_execute_action": {
 5      "suggested_key": {
 6        "default": "Ctrl+B",
 7        "mac": "Command+B"
 8      }
 9    }
10  }
11}

 1//使用js/css文件注入方式
 2chrome.action.onClicked.addListener((tab) => {
 3  chrome.scripting.executeScript({
 4    target: { tabId: tab.id },//注入的目标tab页面
 5    files: ["content-script.js"]//注入的文件
 6  });
 7});
 8
 9//使用js函数注入方式
10chrome.action.onClicked.addListener((tab) => {
11  chrome.scripting.executeScript({
12    target : {tabId : tab.id},//注入的目标tab页面
13    func : injectedFunction,//注入的函数，这个函数必须当前脚本可调用的
14    args : [ "arg1","arg2" ]//函数的参数
15  });
16});
17
18function injectedFunction() {
19  document.body.style.backgroundColor = "orange";
20}

 1{
 2    "manifest_version": 3,
 3    "name": "No Images",
 4    "version": "1.0",
 5    "description": "Remove all the images in the web pages",
 6    "background": {
 7        "service_worker": "background.js"
 8    },
 9    "action": {
10        "default_icon": {
11            "16": "images/icon-16.png",
12            "32": "images/icon-32.png",
13            "48": "images/icon-48.png",
14            "128": "images/icon-128.png"
15        }
16    },
17    "icons": {
18        "16": "images/icon-16.png",
19        "32": "images/icon-32.png",
20        "48": "images/icon-48.png",
21        "128": "images/icon-128.png"
22    },
23    "permissions": ["activeTab", "scripting"]
24}

 1//background.js
 2
 3chrome.action.onClicked.addListener(async(tab) => {
 4    if(!tab.url.includes("chrome://")) {//chrome设置页面不生效
 5    //以编程方式注入
 6    chrome.scripting.executeScript({
 7        target: { tabId: tab.id },//tabId默认是当前激活tab页面的ID
 8        function: removeImages//调用函数
 9    });
10    }
11});
12
13function removeImages(){
14    //选出所有<img>元素
15    const elememts = document.querySelectorAll("img");
16    if(elememts){
17        for(const item of elememts){
18            //元素删除的模式，并非直接删除，而是通过父元素删除
19            item.parentNode.removeChild(item);
20        }
21    }
22}