如何实现一个谷歌浏览器插件 一、什么是Chrome插件？ ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序，比如说vue-devtool。...准确的说，其实更应该叫做Chrome扩展，因为插件是更偏向于底层的技术。Chrome插件本质上来说，就是利用WEB开发技术，包括HTML、CSS和JS等开发出来的web页面，用来增强浏览器的功能。...它生成的文件结果为一个.crx后缀的压缩包，是Chrome Extension的缩写。...插件", // 图标悬停时的标题 "default_popup": "popup.html" // 在工具栏点击插件弹出的页面 }, // 当某些特定页面打开才显示的图标..."], "run_at": "document_start" }, ] 直接将脚本注入到页面中，但是也可以包含CSS文件，但是在注入CSS文件时，要小心
CSS、JS、图片等资源组成的一个.crx后缀的压缩包 扩展程序由一些文件（包括 HTML、CSS、JavaScript、图片以及其他任何您需要的文件）经过 zip 打包得到，为 Google Chrome...目录结构 ├ demo ├ manifest.json //一个清单文件,这是一个配置文件，里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容; ├ popup.html //一个或多个...我们可以实现通过配置的方式轻松向指定页面注入JS和CSS 最常见的比如：广告屏蔽、页面CSS定制，等等。...然后找到extension目录 打包 当您为扩展程序打包时，扩展程序将获得唯一的密钥对，扩展程序的标识符基于公钥的散列，私有密钥用来为每一个版本的扩展程序签名，必须严格保护，不能由公众访问。...单击打包扩展程序 发布包 将您创建 .crx 文件时生成的私有密钥文件重命名为 key.pem。 将 key.pem 文件放在您的扩展程序根目录中。 将这一目录压缩为 ZIP 文件。
当在指定对象上触发此事件时，该函数立即将事件和对象输出到控制台。 当指定对象上发生任何指定事件时，Event 对象将被记录到控制台。...debug() - 调试函数 为了修复不符合预期的页面、功能或组件，你通常会添加一个“调试器”；声明函数声明以激活调试器并尝试了解它有什么问题。 但是，这需要你手动进入源代码以添加这些调试器语句。...Chrome 允许你直接从控制台执行此操作，而无需使用 debug() 函数访问你的源代码。只需在控制台中调用它并将函数的名称传递给它，它就会自动将调试器注入到函数中，让你可以单步调试代码。...此外，你还可以尝试其他一些选项。 代码片段 在调试时，你可能经常需要一遍又一遍地执行同一行代码，直到你完成故障排除。...Google Chrome DevTools 有一个代码片段功能，允许你保存代码片段，以便在需要时使用。片段是一段 JavaScript 源代码，你可以保存并重复使用以进行调试。
一、Chrome 扩展应用程序构成（manifest v3版本） Chrome 扩展开发所用到的技术栈就是html/js/css。可以说就是纯“前端开发”，其界面是用 html+css 画的。...matches 字段表示需要注入脚本的网站地址规则，js和css字段分别表示注入页面的 js 代码和 css 代码。...这段代码是位于“后台脚本”的一段代码，大概意思就是当扩展安装加载完成之后将 color 变量存储在本地 storage 中。...这种方式也是我们在开发调试过程中的使用方式。 自己开发的或者受信任的朋友给予的插件文件代码包，通常是一个包含js、html、css、json文件的文件夹。...野生插件风险较大，非专业人员或非可信来源的插件使用需谨慎。 野生插件包括从网上各大公司官网、网上论坛、或其它地方下载的插件(注意辨别，安全风险较大)。
当然有现成的扩展程序或者插件（两者概念稍有不同）可以清除页面广告，但是既然身为一名程序猿，尤其是FEDer，为什么不尝试一下自己写一个清除广告的扩展程序呢。...其实，编写一个浏览器扩展程序十分简单，尤其是chrome扩展，可以完全使用前端技术（HTML/CSS/JS）完成一个自己编写的扩展程序。...一个应用（扩展）其实是压缩在一起的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。...建立扩展目录： 每个扩展（extension）都应该包含下面的文件： 一个manifest文件 一个或多个html文件 可选的一个或多个javascript文件 可选的任何需要的其他文件...本文只是非常简单的介绍了chrome扩展，只是chrome扩展的冰山一角，使用chrome扩展可以实现更多你想象不到的功能，更多详情或者完整的API，请点击这里。
document-end // 当DOMContentLoaded事件被触发时或者之后注入 // @run-at document-idle // 当DOMContentLoaded事件被触发后被注入...如果没有@run-at标签也是在此时注入 // @run-at context-menu // 当点击浏览器上下文菜单时被注入（仅仅是桌面Chrome-based浏览器） // 注意：如果使用了...如果未指定“活动”或“加载后台”，则选项卡将不会聚焦。此函数返回一个具有函数close、侦听器onclosed和一个名为closed的标志的对象。...name - 文件名，出于安全原因，文件的扩展名必须在TM 参数页面的的白名单里 headers - 如GM_xmlhttpRequest 一样设置请求头部 saveAs - boolean 值,显示一个保存的弹窗...TM尝试自动检测脚本是否需要启用此兼容性选项。
"version": "1.0.0", // 插件描述 "description": "简单的Chrome扩展demo", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons":...，可选 "default_title": "这是一个示例Chrome插件", "default_popup": "popup.html" }, // 当某些特定页面打开才显示的图标 /*"..."js": ["js/jquery-1.8.3.js", "js/content-script.js"], // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式..."css": ["css/custom.css"], // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle...，推荐使用 "chrome_style": true }, // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字 "omnibox": { "keyword" : "go" },
基本介绍 Webpack是一个开源的前端代码打包工具，它可以将多个JavaScript、CSS、图片等静态资源文件打包成一个或多个静态资源文件并通过模块化管理打包后的代码以提高前端应用程序的性能和加载速度...Babel和CSS加载器，用于将ES6代码和CSS样式转换为浏览器可以识别的代码，同时还使用了HtmlWebpackPlugin插件，用于生成HTML文件并将打包后的静态资源文件注入到HTML文件中，最后使用了开发服务器配置...devtool: 'source-map', } 我们在对网站进行测试时如果在浏览器端打开控制台–查看sources/源代码tab–查看包文件，当有webpack文件时则证明当前源码泄漏状态 源码获取...://extensions/"打开插件，单击"加载已解压的扩展程序"，选择"SourceDetector-dist-master"子目录中的dist文件夹 获取步骤 Step 1：浏览网站时使用快捷键...reverse-sourcemap -h 获取步骤 Step 1：浏览网站时使用快捷键"Ctrl+Shift+i"查看并获取目标网站的源代码信息，在本例中可以看到webpack字样，说明使用webpack
；css加载完成，dom和脚本加载之前注入。...动态配置注入 在特定时刻才进行注入，比如点击了某个按钮，或者指定的时刻 需要在popup.js或background.js中执行注入的代码。...通过这些方法，您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息，或者从扩展程序向内容脚本发送。如需处理响应，请使用返回的 promise。...); // 在title属性中有一个%s的标识符，当contexts为selection，使用%s来表示选中的文字 chrome.contextMenus.create({ id: '...}) 然后就可以在content.js或popup.js中获取到数据 // 这里的参数是，获取不到数据时的默认参数 chrome.storage.sync.get({color: 'yellow'},
Auury在DevTools中提供了丰富的UI，您可以： 查看组件的依赖注入（DI）树图 编辑及修改组件的属性 发射事件 等等… 我个人认为，它在我想要了解组件的变更检测触发器可以沿着组件树向下延伸到多深时很有用...这个扩展可以为您做所有的事情。它使您可以在台式机和移动设备上使用不同的浏览器截取网页的屏幕截图，从而为兼容性问题提供了快速而决定性的答案。 8. ColorPick Eyedropper ?...如果您曾经尝试从chrome inspector工具中的元素复制CSS样式代码，则可以轻松了解CSSPeeper带来的价值。 10. WhatFont ?...在浏览网页时，通常吸引我眼球的是页面中正在使用的字体。当我对某个文字感兴趣想要查看其使用的字体时，我会下意识地单击鼠标右键以打开开发人员工具，查看它的源代码。但是，这样还是太繁琐了。...它使您在把鼠标悬停在文本上就能快速查看它使用的字体。 结论 以上只是基于我自己的理解，这些扩展是我的工作更加的轻松快捷。 如果您对上面的内容有任何补充，欢迎评论告诉我，谢谢！
前言 chrome浏览器深受广大用户的喜爱，其扩展性对于开发者来说更加是经常会接触到的，平时用到很多的插件，一方面帮助自己提高了工作的效率，本小节来学习一下chrome插件开发入门篇 在应用商店中下载下来的插件基本上都是以....crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件 chrome插件开发的课程： https://www.w3cschool.cn/kesyi...，可选 "default_title": "这是一个示例Chrome插件", "default_popup": "popup.html" }, // 当某些特定页面打开才显示的图标 /*"page_action..."js": ["custom.js"], // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式 "css": ["custom.css"], "run_at"...导入到chrome中 打开chrmoe插件拓展 直接将以上文件所在的文件夹直接拖到扩展程序页面即可 测试 可以看到左边栏成功的去掉了 因时间有限，后续有时间再深入了解学习吧
例如，不允许使用unsafe-inline指令，这避免扩展执行远程代码，然而，这也意味着注入到页面中隔离环境的Content Scripts受到了扩展CSP策略的约束。...因此，当页面中的链接包含内联的事件处理器/javascript:伪协议时，如果尝试在Content Scripts中点击链接，将发生错误，如下图所示： Issue 1299742 在Content...解决方案 chrome.scripting介绍 为了达成这一目的，Chrome在ManifestV3扩展中提供了动态注入脚本的能力（chrome.scripting）。...该接口允许我们将扩展中存在的js文件或文件中的特定函数注入到指定页面中。...实现方式 有了executeScript方法，我们就可以尝试通过在main环境中执行click来绕过扩展的CSP策略限制。
我们可以实现通过配置的方式轻松向指定页面注入JS和CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面CSS定制，等等。...menuItemId, updateProperties); override(覆盖特定页面) 使用override页可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。...扩展可以替代如下页面： 历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history 新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome..., {file: 'some-script.js'}); 动态注入CSS 示例manifest.json配置： { "name": "动态CSS注入演示", ......注入CSS的时候必须小心 由于通过content_scripts注入的CSS优先级非常高，几乎仅次于浏览器默认样式，稍不注意可能就会影响一些网站的展示效果，所以尽量不要写一些影响全局的样式。
创建一个 Chrome 插件是一个有趣的项目，特别是当结合使用强大的工具如 React、TypeScript、TailwindCSS 和 Vite 时 在这篇文章中，我们将逐步引导完成整个过程，了解如何在...这个文件包含关于扩展的元数据，包括其名称、版本、权限和将使用的后台脚本。 Chrome 插件的关键组件 一个典型的 Chrome 插件包括： 后台脚本：在后台运行并处理事件。...内容脚本：注入到网页中以与 DOM 交互。 弹出 UI：点击扩展图标时出现的界面。...要测试你的扩展，打开 Chrome 并导航到 chrome://extensions。启用 开发者模式 并点击 加载已解压的扩展程序。选择项目的 dist 文件夹。...结论 使用 React、TypeScript、TailwindCSS 和 Vite 创建一个 Chrome 插件是提升开发技能的好方法，并通过尝试新功能和技术不断学习。
Chrome 插件 Chrome 扩展插件运行于基于 Chromium 内核的浏览器 包含：Chrome 浏览器、Microsoft Edge、360 浏览器等 一个 Chrome 扩展插件有 3 类文件组成...，包含： 配置文件 manifest.json js 脚本文件 图片、css 等资源文件 配置文件「 manifest.json 」用于配置扩展的名称、版本号、作者、图标 icon、弹出界面、权限、脚本路径等信息...实战一下 假设我们现在需要完成一个插件，在首次登录或登录失效时，自动完成登录操作 3-1 创建项目 我们创建一个文件夹，项目结构目录如下 3-2 项目配置 我们在 manifest.json 配置文件中...这里设置所有的页面都会执行 content.js 脚本，当匹配到第二个页面时，执行 content_vx.js 脚本 需要指出的是，run_at 设置为 document_end，代表当页面加载完成后...，每次打开目标网站或退出登录时，会发现网页会自动完成登录操作 4.
Chrome扩展开发技能要求同创建Web应用程序相同的Web技术编写，也就是作为前端程序员最为熟悉的前端开发三件套，HTML、CSS 和 JavaScript。 Chrome扩展API？...Chrome扩展可以使用浏览器提供的所有JavaScriptAPI。使用扩展程序比Web应用程序更强大的是它们对ChromeAPI的访问。 可以获得更改网站的功能和行为。...向 Chrome DevTools 添加功能。 Chrome扩展文件？ 序号 类型 描述 1 manifest 扩展程序的清单是唯一必须具有特定文件名的必需文件： manifest.json 。...它可以使用所有的Chrome API，但不能直接与网页内容交互；这就是内容脚本的工作 4 popup/page 扩展可以包含各种 HTML 文件，例如弹出窗口、选项页面和其他 HTML 页面。.../assets/icon-128.png" } } PS：配合VSCode插件《Chrome Extension Manifest JSON Schema》使用 将内容脚本注入页面 先配置（指向内容脚本文件
第一步 首先需要一个 manifest.json 文件。manifest.json 文件是 Chrome 扩展的配置文件，定义了扩展的基本信息、权限和功能。...常用功能 popup 页面 在 Chrome 扩展中，popup 页面是指当用户点击扩展图标时弹出的界面。这个界面通常用于提供用户交互或展示信息。...Chrome 扩展的安全性设计确实不允许在 HTML 页面中直接使用 JavaScript 代码来加载或执行扩展的功能。Chrome 扩展通过内容安全性策略来限制可以在页面上执行的脚本。...与页面交互：与页面上的元素进行交互，获取或修改它们的内容、属性和样式。 数据注入：在页面加载时向页面注入自定义的 HTML、CSS 或 JavaScript，改变页面的外观或行为。...右键菜单 在 Chrome 扩展中，右键菜单（Context Menu）是指用户右键点击浏览器页面或特定元素时弹出的菜单选项。
，使用 content_scripts 配置项，另一种是编程方式注入使用 permissions: ["activeTab"] 选项， 声明型注入脚本 content_scripts 值可以是一个数组...，设置不同站点的不同注入文件 需要设置 matches: ["http://"] 指定匹配的网址， js 设置注入脚本 css 设置注入样式 run_at 定义注入要本的时机 document_idle...表示浏览器帮你把握时机，会在 DOM 完成 与 window.onload 之后注入；document_start 在 CSS 注入之后，其他任何脚本或者 DOM 之前注入；document.end...extension~'}); } }); 13. offline_enabled 扩展是否需要离线工作，默认为 true, 当chrome 检测到离线时，程序会被高亮显示 14. permissions...开放 正在运行请求的 拦截、阻塞、或修改的权限 15. web_accessible_resources 指定打包资源的的路径字符串数组，这些资源是在扩展中是可用了，例如 content_script
这个还是比较重要的，不同的配置项版本，配置项文件有略微的差别，在中文开发文档中给的例子还是1，但是最新的官方已经是3了。这个在配置时还是要注意下保持版本一致的。...permissions是指本扩展需要使用到的权限。...content_scripts就是本次开发的重点了，他是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助content_scripts我们可以实现通过配置的方式轻松向指定页面注入...当然还有popup即鼠标点击扩展时弹出的页面，因为这次没用到，所以我没把这个配置项加进去。...'basic', iconUrl: 'icon.png', title: 'demo', message: '下载插件已启动' }); }); 当插件启动时
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
