用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呀
- 群二维码: