如何给别人网页上增加内容通过Chrome扩展为网页添加快速滚动功能
Content Scripts
来看开发网站的介绍，Content Scripts 是一类在网页上下文中运行的文件。它们可以使用标准的DOM接口，实现
- 读取浏览器访问的网页的详细信息，比如网页的DOM结构、元素属性等。
- 对网页进行修改，比如添加、删除或修改DOM元素，改变网页的样式等。
- 将获取到的网页信息传递给它们的父级扩展程序，以便扩展程序可以进一步处理这些信息，实现一些功能。
很明显，我们的需求就需要借助 Content Scripts实现。
WXT 机制
WXT直接在entrypoints/content.ts中编写Content Scripts内容，主要关注两点
javascript代码解读
复制代码
export default defineContentScript({ matches: ['<all_urls>'], main(ctx) { }, });
- matches: 用来匹配网页地址，让脚本内容在哪些网页上运行。比如匹配Google就是 *://*.google.com/*
- main: 就是真正编写脚本内容的地方
要往页面上添加元素，WXT提供了三种不同的方式:
方式 | 使用函数 | 样式隔离 | 事件隔离 | HMR | 访问页面上下文 |
Integrated | createIntegratedUi | ||||
Shadow Root | createShadowRootUi | (但默认是关闭的) | |||
IFrame | createIframeUi |
我们选择采用 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，看一张图就理解
扩展实现
先思考实现的步骤：
- 初始化WXT项目：跟之前一样快速初始化一个WXT功能，并选择React，增加Antd依赖。
- 创建Popup页面：用于控制当前页面是否启用滚动功能，并提供快捷键说明。
- 监听快捷键：在main函数中增加快捷键监听，实现快捷滚动功能。
- 完善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