Content Scripts

来看开发网站的介绍，Content Scripts 是一类在网页上下文中运行的文件。它们可以使用标准的DOM接口，实现

1. 读取浏览器访问的网页的详细信息，比如网页的DOM结构、元素属性等。
2. 对网页进行修改，比如添加、删除或修改DOM元素，改变网页的样式等。
3. 将获取到的网页信息传递给它们的父级扩展程序，以便扩展程序可以进一步处理这些信息，实现一些功能。

很明显，我们的需求就需要借助 Content Scripts实现。

WXT 机制

WXT直接在entrypoints/content.ts中编写Content Scripts内容，主要关注两点

javascript

代码解读

复制代码

export default defineContentScript({ matches: ['<all_urls>'], main(ctx) { }, });

• matches: 用来匹配网页地址，让脚本内容在哪些网页上运行。比如匹配Google就是 *://*.google.com/*
• main: 就是真正编写脚本内容的地方

要往页面上添加元素，WXT提供了三种不同的方式:

我们选择采用 Integrated ，并继续使用React来渲染页面

javascript

代码解读

复制代码

export default defineContentScript({ matches: ['<all_urls>'], main(ctx) { const ui = createIntegratedUi(ctx, { position: 'inline', anchor: 'body', onMount: (container) => { const root = ReactDOM.createRoot(container); root.render(<Content />); return root; }, onRemove: (root) => { root.unmount(); }, }); ui.mount(); }, });

position支持inline、overlay和modal，看一张图就理解

扩展实现

先思考实现的步骤：

1. 初始化WXT项目：跟之前一样快速初始化一个WXT功能，并选择React，增加Antd依赖。
2. 创建Popup页面：用于控制当前页面是否启用滚动功能，并提供快捷键说明。
3. 监听快捷键：在main函数中增加快捷键监听，实现快捷滚动功能。
4. 完善Content组件：创建一个React组件，用于在页面上显示滚动到顶部和底部的按钮，并处理鼠标悬停和点击事件。

其中关键的代码示例如下：

要监听快捷键，直接在之前的main函数中增加监听

vbnet

代码解读

复制代码

main(ctx) { ctx.addEventListener(document, "keydown", async (e) => { // key down event if (e.shiftKey) { if (e.key === "ArrowDown") { if (await WxtStorage.get(CONSTANTS.arrowDownStateKey, true)) { UTIL.scrollToBottom(); } } else if (e.key === "ArrowUp") { if (await WxtStorage.get(CONSTANTS.arrowUpStateKey, true)) { UTIL.scrollToTop(); } } } }); ... }

接下来完善Content组件

ini

代码解读

复制代码

function Content() { const host = window.location.hostname; const [isTopHover, setTopHover] = useState(false); const [isBottomHover, setBottomHover] = useState(false); const [visible, setVisible] = useState(false); useEffect(() => { const fetchVisible = async () => { const value = await WxtStorage.get(CONSTANTS.hostStatePrefix + host, 1); setVisible(value === undefined ? true : value! === 1); }; fetchVisible(); }, []); const baseStyle = { width: '30px', height: '30px', padding: '10px', margin: '5px', borderRadius: '10px', cursor: 'pointer', } const scrollToTopStyle = { ...baseStyle, opacity: isTopHover ? 1 : 0.2, backgroundColor: isTopHover ? '#efefef' : 'transparent', } const scrollToBottomStyle = { ...baseStyle, opacity: isBottomHover ? 1 : 0.2, backgroundColor: isBottomHover ? '#efefef' : 'transparent', } return ( <div style={{ position: 'fixed', top: '50%', right: '10px', transform: 'translate(0, -50%)' }}> <div style={{ visibility: visible ? 'visible' : 'hidden' }}> <img style={scrollToTopStyle} onClick={UTIL.scrollToTop} onMouseEnter={() => setTopHover(true)} onMouseLeave={() => setTopHover(false)} src={TopImg} alt='Go to top' /> </div> <div style={{ visibility: visible ? 'visible' : 'hidden' }}> <img style={scrollToBottomStyle} onClick={UTIL.scrollToBottom} onMouseEnter={() => setBottomHover(true)} onMouseLeave={() => setBottomHover(false)} src={BottomImg} alt='Go to bottom' /> </div> </div> ); }

完整代码见： github.com/xckevin/chr… 最终效果图如下

原文链接：https://juejin.cn/post/7430475913959325730