正在上网课，老师做的课件很烦，77个每个5分钟的短视频，但是要一直点下一个，遂出现想法搞个chrome插件来解决问题
看了相关的js监听页面元素变化window.MutationObserver 这篇文章之后考虑了一下
围绕浏览器的 MutationObserver 来监控dom的变化
每次监控范围的dom有变动时会调用回调函数处理，这里就是点击下一课的按钮来自动完成
核心代码如下
content_scripts.js
let config = {
attributes: true, //目标节点的属性变化
childList: true, //目标节点的子节点的新增和删除
characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化
subtree: true, //目标节点所有后代节点的attributes、childList、characterData变化
};
const mutationCallback = (mutationsList) => {
for(let mutation of mutationsList) {
let type = mutation.type;
switch (type) {
case "childList":
let dom = document.querySelector(".btn")
if (dom){
let btn = document.querySelector(".btn0");
btn.click();
}
console.log("点击成功");
break;
// case "attributes":
// console.log(`The ${mutation.attributeName} attribute was modified.`);
// break;
// case "subtree":
// console.log(`The subtree was modified.`);
// break;
default:
break;
}
}
};
这里核心代码就完成了，但是需要在浏览器中加载，需要chrome.tabs来判断是否可以加载，但是这里犯了个错误。
content_scripth是禁止访问除了chrome.extension的参数的这里可以看到360翻译的chrome文档，虽然老，但是还是解释了这段
找到这段后，我迅速把tabs判断的code切换到了background.js
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
console.log('init');
if (changeInfo.url == undefined) {
return false;
}
// 检查是否是wish页面的tab
// if(tab.url.indexOf('pinterest.com') > 0){
// 通知对应的tab页面url变化了,需要优化为离开立即移除，进入则加载完毕再添加
if (tab.status === 'loading') {
chrome.tabs.sendMessage(tabId, {
type: 'tabUpdate', tab: tab
}, function (response) {
console.log('inited');
});
// }
}
});
至此，基本的功能已经完成，经过测试，可以正常使用了
附录：
manifest.json
{
"manifest_version": 3,
"name": "上课助手",
"version": "0.1.0",
"description": "用于监控网课查看完毕自动切换到下一个网课的工具",
"icons": {
"16": "icons/icon_16.png",
"32": "icons/icon_32.png",
"48": "icons/icon_48.png",
"128": "icons/icon_128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "上课助手",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"activeTab"
],
"host_permissions": [
"https://学校网址/"
],
"content_scripts": [
{
"run_at": "document_idle",
"js": [
"contentScript.js"
]
}
]
}