本章学习如何创建turboReader插件，如下图：
<video
src={
'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/turboreader_ghlbnk.webm'
}
autoPlay
初始化项目
mkdir turboReader && cd turboReader
添加manifest.json.json
{
"manifest_version": 3,
"version": "1.0",
"name": "TurboReader",
"description": "Become a faster reader with TurboReader",
"action": {},
"icons": {
"48": "icons/icon-48.png"
},
"background": {
"service_worker": "background.js"
},
"permissions": ["activeTab", "scripting"]
}
添加background.js，获取活动标签，并注入名为turboMode的函数。
const turboMode = () => {
// do something
}
chrome.action.onClicked.addListener(async () => {
const [tab] = await chrome.tabs.query({active: true, currentWindow: true})
chrome.scripting.executeScript({
target: {tabId: tab.id},
function: turboMode
})
})
创建函数
首先获取页面内所有段落
const paragraphs = document.getElementsByTagName('p')
判断当前是否是阅读模式
const isTurboMode = document.body.classList.contains('trms')
遍历并处理段落
for (const paragraph of paragraphs) {
if (isTurboMode) {
// 阅读模式已开启就返回当前段落
paragraph.innerText = paragraph.innerText
} else {
// 阅读模式未开启，返回处理后的段落
paragraph.innerHTML = paragraph.innerText
.split(' ')
.map((word) => {
const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
const boldLength = length === 1 ? 1 : Math.floor(length / 2)
return `<strong>${word.substring(
0,
boldLength
)}</strong>${word.substring(boldLength)}`
})
.join(' ')
}
}
在循环外部加入判断
isTurboMode
? document.body.classList.remove('trms')
: document.body.classList.add('trms')
完整代码
const turboMode = () => {
const paragraphs = document.getElementsByTagName('p')
const isTurboMode = document.body.classList.contains('trms')
for (const paragraph of paragraphs) {
if (isTurboMode) {
paragraph.innerText = paragraph.innerText
} else {
paragraph.innerHTML = paragraph.innerText
.split(' ')
.map((word) => {
const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
const boldLength = length === 1 ? 1 : Math.floor(length / 2)
return `<strong>${word.substring(
0,
boldLength
)}</strong>${word.substring(boldLength)}`
})
.join(' ')
}
}
isTurboMode
? document.body.classList.remove('trms')
: document.body.classList.add('trms')
}
Top comments (0)