摘要本文详细介绍Chrome插件Content Script的开发重点讲解页面注入机制、DOM操作方法、与Background Script通信等核心技术并以MuxDesk的两款独立Chrome插件Instagram视频下载器、Telegram视频下载器为例展示实际应用。一、引言1.1 背景介绍Content Script是Chrome插件中运行在网页上下文中的脚本它可以访问和修改网页的DOM元素是实现插件功能的核心组件之一。产品背景MuxDesk 目前提供两款独立的 Chrome 插件——Instagram 视频下载器和Telegram 视频下载器分别针对各自平台做视频流检测。下文代码示例会分别展示两款插件的 Content Script 实现方式你也可以把它们理解为同一套代码逻辑的两个独立发行版本。1.2 本文目标通过本文你将了解Content Script的基本概念和工作原理页面注入的几种方式DOM操作的常用方法与Background Script的通信机制MuxDesk的Instagram/TG插件如何使用Content Script检测视频二、Content Script基础2.1 什么是Content ScriptContent Script是运行在网页上下文中的JavaScript脚本具有以下特点可以访问网页的DOM可以读取网页内容可以修改网页样式与Background Script隔离2.2 配置方式// manifest.json以 MuxDesk Instagram 视频下载器为例{content_scripts:[{matches:[https://www.instagram.com/*],js:[content.js],css:[content.css],run_at:document_idle}]}最佳实践matches应精确限定到目标站点域名而不是用all_urls全站注入。MuxDesk 的 Instagram 插件只匹配instagram.comTelegram 插件只匹配t.me/web.telegram.org既减少性能开销也降低隐私风险。2.3 注入时机document_startDOM加载前document_endDOM加载完成document_idle页面加载完成后推荐三、页面注入方式3.1 静态注入{content_scripts:[{matches:[https://www.instagram.com/*],js:[content.js],run_at:document_idle}]}3.2 动态注入// 使用scripting API动态注入chrome.scripting.executeScript({target:{tabId:tabId},files:[content.js]});3.3 注入CSS// 动态注入CSSchrome.scripting.insertCSS({target:{tabId:tabId},files:[content.css]});四、DOM操作基础4.1 查询元素// 通过ID查询constelementdocument.getElementById(myId);// 通过类名查询constelementsdocument.getElementsByClassName(myClass);// 通过标签名查询constvideosdocument.getElementsByTagName(video);// 通过CSS选择器查询constelementdocument.querySelector(.my-class);constelementsdocument.querySelectorAll(.my-class);4.2 修改元素// 修改文本内容element.textContentNew text;// 修改HTML内容element.innerHTMLstrongBold text/strong;// 修改属性element.setAttribute(src,new-image.jpg);// 修改样式element.style.colorred;element.style.displaynone;4.3 创建和删除元素// 创建新元素constnewElementdocument.createElement(div);newElement.textContentHello World;document.body.appendChild(newElement);// 删除元素element.remove();五、MuxDesk的Content Script实现5.1 视频检测器// MuxDesk Content Script - 视频检测classVideoDetector{constructor(){this.videos[];this.observernull;}init(){// 初始检测this.detectVideos();// 监听DOM变化this.observernewMutationObserver((){this.detectVideos();});this.observer.observe(document.body,{childList:true,subtree:true});}detectVideos(){// 检测video标签constvideoElementsdocument.querySelectorAll(video);videoElements.forEach(video{if(video.src!this.videos.includes(video.src)){this.videos.push(video.src);this.notifyBackground(video.src);}});// 检测source标签constsourceElementsdocument.querySelectorAll(source);sourceElements.forEach(source{if(source.src!this.videos.includes(source.src)){this.videos.push(source.src);this.notifyBackground(source.src);}});}notifyBackground(url){chrome.runtime.sendMessage({action:videoDetected,url:url});}}// 初始化constdetectornewVideoDetector();detector.init();5.2 DOM监听器// DOM变化监听classDOMWatcher{constructor(){this.observernull;}start(){this.observernewMutationObserver((mutations){mutations.forEach(mutation{// 处理新增节点mutation.addedNodes.forEach(node{if(node.nodeTypeNode.ELEMENT_NODE){this.processNode(node);}});});});this.observer.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:[src,href]});}processNode(node){// 检查是否是视频元素if(node.tagNameVIDEO||node.tagNameSOURCE){console.log(Video element detected:,node);}// 检查子元素constvideosnode.querySelectorAll(video, source);videos.forEach(video{console.log(Video element detected:,video);});}stop(){if(this.observer){this.observer.disconnect();}}}5.3 消息通信// 与Background Script通信classMessageHandler{constructor(){this.init();}init(){// 监听来自Background的消息chrome.runtime.onMessage.addListener((request,sender,sendResponse){console.log(Received message:,request);switch(request.action){casestartDetection:this.startDetection();sendResponse({status:started});break;casestopDetection:this.stopDetection();sendResponse({status:stopped});break;casegetVideos:sendResponse({videos:this.getVideos()});break;}returntrue;});}sendToBackground(message){chrome.runtime.sendMessage(message,(response){console.log(Response from background:,response);});}startDetection(){// 开始检测逻辑}stopDetection(){// 停止检测逻辑}getVideos(){// 获取检测到的视频return[];}}六、平台特定实现6.1 Instagram视频检测// Instagram视频检测classInstagramDetectorextendsVideoDetector{detectVideos(){// 检测Reelsconstreelsdocument.querySelectorAll(article video);reels.forEach(video{this.processVideo(video,reel);});// 检测Storiesconststoriesdocument.querySelectorAll(story video);stories.forEach(video{this.processVideo(video,story);});// 检测帖子视频constpostsdocument.querySelectorAll(article video);posts.forEach(video{this.processVideo(video,post);});}processVideo(video,type){constinfo{url:video.src||video.currentSrc,type:type,duration:video.duration,width:video.videoWidth,height:video.videoHeight};console.log(Instagram video detected:,info);this.notifyBackground(info);}}6.2 Telegram视频检测// Telegram视频检测classTelegramDetectorextendsVideoDetector{detectVideos(){// 检测消息中的视频constmessagesdocument.querySelectorAll(.message);messages.forEach(message{constvideomessage.querySelector(video);if(video){this.processVideo(video,message);}});}processVideo(video,message){constinfo{url:video.src||video.currentSrc,messageId:message.dataset.messageId,duration:video.duration};console.log(Telegram video detected:,info);this.notifyBackground(info);}}七、常见问题7.1 问题一Content Script无法访问DOM现象Content Script中查询DOM返回null原因注入时机过早DOM未加载完成解决// 等待DOM加载完成if(document.readyStateloading){document.addEventListener(DOMContentLoaded,init);}else{init();}7.2 问题二Content Script与Background通信失败现象发送消息后没有收到响应原因Service Worker未启动或已休眠解决// 发送消息前检查Service Worker状态asyncfunctionsendMessage(message){try{constresponseawaitchrome.runtime.sendMessage(message);returnresponse;}catch(error){console.error(Send message failed:,error);}}7.3 问题三DOM监听器性能问题现象页面卡顿CPU占用高原因MutationObserver监听范围过大解决// 限制监听范围observer.observe(targetNode,{childList:true,subtree:false,// 不监听子树attributes:false});八、总结8.1 核心要点Content Script运行在网页上下文中可以访问和修改网页DOM使用MutationObserver监听DOM变化通过消息机制与Background Script通信8.2 最佳实践选择合适的注入时机限制DOM监听范围处理异步操作注意性能优化九、参考资料Chrome Extension DocumentationContent Scripts ReferenceMuxDesk官网相关推荐Chrome插件开发入门Manifest V3基础架构详解
