},
// 当某些特定页面打开才显示的图标
/*“page_action”:
{
“default_icon”: “img/icon.png”,
“default_title”: “我是pageAction”,
“default_popup”: “popup.html”
},*/
// 需要直接注入页面的JS
“content_scripts”:
[
{
//“matches”: [“http:///”, “https:///”],
// “<all_urls>” 表示匹配所有地址
“matches”: [“<all_urls>”],
// 多个JS按顺序注入
“js”: [“js/jquery-1.8.3.js”, “js/content-script.js”],
// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
“css”: [“css/custom.css”],
// 代码注入的时间，可选值： “document_start”, “document_end”, or “document_idle”，最后一个表示页面空闲时，默认document_idle
“run_at”: “document_start”
},
// 这里仅仅是为了演示content-script可以配置多个规则
{
“matches”: [“😕//.png", "😕//.jpg”, “😕//.gif", "😕//.bmp”],
“js”: [“js/show-image-content-size.js”]
}
],
// 权限申请
“permissions”:
[
“contextMenus”, // 右键菜单
“tabs”, // 标签
“notifications”, // 通知
“webRequest”, // web请求
“webRequestBlocking”,
“storage”, // 插件本地存储
“http:///”, // 可以通过executeScript或者insertCSS访问的网站
“https:///” // 可以通过executeScript或者insertCSS访问的网站
],
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
“web_accessible_resources”: [“js/inject.js”],
// 插件主页，这个很重要，不要浪费了这个免费广告位
“homepage_url”: “https://www.baidu.com”,
// 覆盖浏览器默认页面
“chrome_url_overrides”:
{
// 覆盖浏览器默认的新标签页
“newtab”: “newtab.html”
},
// Chrome40以前的插件配置页写法
“options_page”: “options.html”,
// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
“options_ui”:
{
“page”: “options.html”,
// 添加一些默认的样式，推荐使用
“chrome_style”: true
},
// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
“omnibox”: { “keyword” : “go” },
// 默认语言
“default_locale”: “zh_CN”,
// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
“devtools_page”: “devtools.html”
}
在配置文件中还有一个非常重要的配置项：content_scripts，这个配置项怎么说呢，就问一个问题吧，知道一些购物网站上设置的抢购吗，准点到时之后开始抢购，但当我们开始抢了之后往往就直接没有了，为什么？因为有些人用了脚本，那么脚本怎么来的呢？实际上就是通过content_scripts给当前网页注入了js代码，在js代码里可以获取到dom，然后进行下一步之类的操作；
这样说这个属性能明白了吧，就是给当前页面注入脚本的，常见的功能可以用来：广告屏蔽、页面CSS定制；
举个例子，现在我们要给当前页面注入一个jquery，以及我们写的一个CSS样式文件作为皮肤，怎么办？
{
// 需要直接注入页面的JS
“content_scripts”:
[
{
//“matches”: [“http:///”, “https:///”],
// “<all_urls>” 表示匹配所有地址
“matches”: [“<all_urls>”],
// 多个JS按顺序注入
“js”: [“js/jquery-1.8.3.js”],
// CSS的注入就要当心，因为一不小心就可能影响全局样式
“css”: [“css/demoTest.css”],
// 代码注入的时间，可选值： “document_start”, “document_end”, or “document_idle”，最后一个表示页面空闲时，默认document_idle
“run_at”: “document_start”
}
],
}
这个属性代表点击扩展栏中的小图标时显示的菜单，看个例子吧：
这个是react的chrome插件，相信大家很熟悉，当我们点击这个图标的时候，插件会弹出一个下拉菜单，这个菜单实际上是一个html文件，文件中可以写上任意内容，也可以是一些操作按钮之类的，这个怎么实现？其实就是使用popup实现的
popup可以包含任意你想要的HTML内容，并且会自适应大小。可以通过default_popup字段来指定popup页面，也可以调用setPopup()方法：
{
“browser_action”:
{
“default_icon”: “img/icon.png”,
// 可选属性，这个属性代表悬停时的显示的图标标题
“default_title”: “这是一个起始页的Chrome插件，谢谢”,
“default_popup”: “popup.html”
}
}
值得注意的是：popup页面的生命周期很短，当我们点击图标打开页面时生命周期开始，失去焦点关闭html页面时生命周期结束，因此长时间运行的代码不要放在这个html文件里；
既然popup的生命周期很短，有没有哪个属性时可以长时间运行在chrome后台的，答案肯定是有的，那么就是background属性
{
// 设置常驻chrome后台的页面或者是javascript代码
“background”:
{
// 方式一：指定一个html文件为常驻的背景页
“page”: “background.html”
// 方式二：指定一个常驻的js文件，那么此时会自动生成一个背景页
//“scripts”: [“js/background.js”]
},
}
设置后，可以通过：chrome-extension://xxx/background.html打开我们设置的后台页面，当然，由于这个属性指定的页面会从始至终一致在后台运行，因此非常消耗性能，不到万不得已最好不要使用，毕竟保不齐会变成浏览器用着用着就未响应直接挂了；
和background相反，由于background长时间在后台运行会非常消耗性能，因此谷歌弄了个event-pages属性，它代表被需要时才加载，比如：第一次安装、插件更新、有content-script向它发送消息等等，空闲了就会被关闭：
{
“background”:
{
“scripts”: [“event-page.js”],
“persistent”: false
},
}
===============================================================
使用之前的发布的Vue代码打包后，放进插件会发现页面打不开？
比如在之前那篇《Vue3+TS》开发一个自己的起始页文章中使用的代码，如果直接打包，放进插件里会发现站点打不开，为什么呢？实际上chrome插件中的html代码都是要求本地打开的，也就是相当于html文件在本地被双击打开，并不是出于服务器模式的那种运行方式；
因此，如果想要将页面放进行插件，那么代码必须可以被本地打开，拿之前的那份代码为例，我们使用到了router-view，但是router-view在本地双击打开运行的时候无法被加载，因此需要改动
router-view直接被我注销掉了，改为引入组件，这样就可以使用了，同时在html文件内的资源路径也得改，都要改成相对路径，这样才可以使得html中引入的静态文件能被找到，比如：
href=“./css/chunk-vendors.21d7bb44.css”
rel=“preload”
as=“style”
/>
<noscript
<strong
We’re sorry but 33起始页 ε=ε=ε=┌(;￣◇￣)┘ doesn’t work properly
without JavaScript enabled. Please enable it to
continue.</strong
</noscript
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。
Dna6-1712553310583)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-PGmdrYM3-1712553310583)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。
[外链图片转存中…(img-ZHQpyuLz-1712553310584)]
[外链图片转存中…(img-PgYqtd2n-1712553310584)]
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
