外观

用Chrome插件开发HelloWorld ​

manifest.json

json
{
    "manifest_version": 3,
    "name": "Hello happyfe",
    "description": "happyfe的第一个chrome插件",
    "version": "1.0",
    "action": {
      "default_popup": "hello.html",
      "default_icon": "hello.png"
    }
  }

hello.html

html
<html>
  <body>
    <h1>Hello Extensions3333</h1>
  </body>
</html>

阅读时间(content_scripts讲解) ​

manifest.json

json
{
    "manifest_version": 3,
    "name": "阅读时间",
    "version": "1.0",
    "description": "Add the reading time to Chrome Extension documentation articles",
    "icons": {
        "16": "images/icon-16.png",
        "32": "images/icon-32.png",
        "48": "images/icon-48.png",
        "128": "images/icon-128.png"
    },
    "content_scripts": [
        {
            "js": [
                "scripts/content2.js"
            ],
            "matches": [
                "https://developer.chrome.com/docs/extensions/*",
                "https://developer.chrome.com/docs/webstore/*"
            ]
        }
    ]
}

content2.js

js
// 选择页面中的文章元素
const article = document.querySelector("article");

// `document.querySelector` may return null if the selector doesn't match anything.
// 如果文章元素存在
if (article) {
    // 获取文章的文本内容
    const text = article.textContent;
    // 定义一个正则表达式，用于匹配非空白字符
    const wordMatchRegExp = /[^\s]+/g; // Regular expression
    // 使用正则表达式匹配文章中的所有单词
    const words = text.matchAll(wordMatchRegExp);
    // matchAll returns an iterator, convert to array to get word count
    // 将匹配结果转换为数组，并获取单词数量
    const wordCount = [...words].length;
    // 计算预计阅读时间（假设每分钟阅读100个单词）
    const readingTime = Math.round(wordCount / 100);
    // 创建一个新的段落元素用于显示阅读时间
    const badge = document.createElement("p");
    // Use the same styling as the publish information in an article's header
    // 为段落元素添加样式类，使其与文章头部的发布信息样式相同
    badge.classList.add("color-secondary-text", "type--caption");
    // 设置段落元素的文本内容，显示预计阅读时间
    badge.textContent = `⏱️ 预计${readingTime} 分钟读完来来来`;

    // Support for API reference docs
    // 选择文章中的第一个h1元素
    const heading = article.querySelector("h1");
    // Support for article docs with date
    // 选择文章中的time元素的父节点（假设它包含日期信息）
    const date = article.querySelector("time")?.parentNode;

    // 将阅读时间徽章插入到日期元素或标题元素之后
    (date ?? heading).insertAdjacentElement("afterend", badge);
}

右键百度翻译 ​

manifest.json

json
{
  "manifest_version": 3,
  "name": "百度翻译",
  "version": "1.0",
  "description": "好用的百度翻译",
  "permissions": [
    "contextMenus",
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/logo.png",
      "48": "icons/logo.png",
      "128": "icons/logo.png"
    }
  },
  "icons": {
    "16": "icons/logo.png",
    "48": "icons/logo.png",
    "128": "icons/logo.png"
  }
}

background.js

js
chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
      id: "translateWithBaidu",
      title: "百度翻译222: %s",
      contexts: ["selection"]
    });
  });
  
  chrome.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "translateWithBaidu") {
      const selectedText = info.selectionText;
      const url = `https://fanyi.baidu.com/mtpe-individual/multimodal?query=${selectedText}`;
      chrome.tabs.create({ url: url });
    }
  });

popup.html

html
<!DOCTYPE html>
<html>
<head>
  <title>右键百度翻译</title>
  <meta charset="utf-8"></meta>
  <style>
    body {
      width: 200px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>右键百度翻译</h1>
  <p>右键点击网页文本并使用百度翻译进行翻译llll</p>
</body>
</html>

QQ学习交流群

  • 群号：1005894762
  • 群名：happyfe呀的学习交流群
  • 进群口令: happyfe呀
  • 群二维码:qr_code

更新时间: