外观

用 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 学习交流群

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

更新时间: