我写了我的第一个Chrome插件

做这个插件主要是因为每次在微信公众平台编辑的时候，有一些默认的设置很烦人，比如默认的字体大小，段前段后距，真的太大了。。。好像某次更新了就这样了，而且改了还没用，得自己一个地方一个地方的改，不能将默认的改了。所以我觉得可以写一个插件，在刷新页面的时候改掉这些样式！
想着是很简单，但是踩坑无数，不限于console.log失效, 脚本没执行, 获取不到网页的元素等。
一开始错误的方式我就不演示了，我写一下基本的方法吧。
我们建一个文件夹, Chrome插件有个最基本的JSON配置文件，叫做manifest.json,我们看一下该怎么写,下面是我的写法,还有些icon什么的我没有去配置,毕竟就自己用用。
manifest.json
{
“manifest_version”: 2,
// 指定manifest文件的版本，目前主要使用的是2或3版本
“name”: “Page Element Modifier”,
// 插件的名称，将显示在Chrome扩展管理页面和相关的用户界面上。
“version”: “1.0”,
// 插件的版本号，用于区分不同版本的插件。
“description”: “Modify webpage elements as it loads”,
// 插件的简要描述，用户在安装时可以看到这个描述
“permissions”: [“activeTab”],
// 插件需要访问的权限，例如访问特定网站、获取用户数据等。
“content_scripts”: [
// 定义内容脚本，允许插件在特定网页上注入JavaScript和CSS。
{
“matches”: [“”],
// 匹配所有的网站
“js”: [“content.js”],
“run_at”: “document_start”
}
]
}

content.js
document.addEventListener(“DOMContentLoaded”, function () {
console.log(window.location.href);
// 在这里编写修改DOM的代码
setTimeout(() => {
const iframe = document.getElementById(“ueditor_0”);
console.log(iframe);
const iframeDocument =
iframe.contentDocument || iframe.contentWindow.document;
// 在 iframe 内部查找类名为 ‘rich_media_content’ 的元素
const elementInIframe =
iframeDocument
.getElementsByClassName(“rich_media_content”);
// 检查是否找到了元素
if (elementInIframe) {
console.log(elementInIframe[0]);
console.log(“找到了元素:”, elementInIframe);
elementInIframe[0].style.fontSize = “14px”;
elementInIframe[0].style.backgroundColor = “pink”;
} else {
console.log(“未找到符合条件的元素”);
}
}, 3000);
});

因为这个编辑框的内容被嵌在了iframe中, 所以我们要先拿到这个iframe,再去拿里面的元素
okok.现在这个插件就写到这,接下来要怎么用呢。
我们打开谷歌的扩展管理

然后直接将我们的文件夹拖进去

如果失败的话看看报错
这样我们的插件就安装好了，每次代码有修改的话需要点一下更新

记得将开关打开

看看效果:

但是这只是个小尝试,我接下来要修改它的字体大小,段前段后距等,看看这篇效果
ok! 大致就这样!
大家也多多尝试哦!我觉得还蛮有趣的