Chrome扩展插件的开发--获取网页Cookies Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。...设置的是扩展插件图片，路径位置相对于配置文件； // manifest.json继续配置action { ... ...在开发插件时，不能将 js 代码直接写在 html 文件里，否则会报错，必须要单独新建一个 js 文件，然后通过 script 标签引用该文件；通过在popup.js内调用chrome获取cookies... 读取浏览器已打开的tab页签，其中'active': true访问到的是当前所处的标签页 // WINDOW_ID_CURRENT 当前标签页id chrome.tabs.query(...浏览器内导入使用 · 打开chrome的插件管理页面chrome://extensions · 打开该页面右上角的开发者模式 · 点击加载已解压的扩展程序，上传本地文件即可导入插件 · 点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部
Chrome扩展插件的开发--获取网页CookiesChrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。...host_permissions": ["http://*/*","https://*/*"],"permissions": ["cookies","tabs"]}popup.js在开发插件时，不能将...监听当前页面的HTML加载完成document.addEventListener('DOMContentLoaded', () => {// chrome.tabs 读取浏览器已打开的tab页签，其中...'active':true访问到的是当前所处的标签页// WINDOW_ID_CURRENT 当前标签页idchrome.tabs.query({ 'active': true, 'windowId':...浏览器内导入使用 打开chrome的插件管理页面chrome://extensions打开该页面右上角的开发者模式点击加载已解压的扩展程序，上传本地文件即可导入插件点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部
version：本插件的版本，和发布相关 action：点击图标时，设置一些交互 16、32、48、128 default_icon：展示图标 default_popup：popup.html，一个弹窗页面...页面之间进行数据通信 如需将单条消息发送到扩展程序的其他部分并选择性地接收响应，请调用 runtime.sendMessage()[7] 或 tabs.sendMessage()[8]。...; }); }); } // 创建百度搜索,并跳转到搜索结果页 if (info.menuItemId === 'baidusearch1') { // console.log...}) 然后就可以在content.js或popup.js中获取到数据 // 这里的参数是，获取不到数据时的默认参数 chrome.storage.sync.get({color: 'yellow'},...}) tabs创建页签 首先在manifest.json的权限中添加tabs配置 { "permissions": ["tabs"] } 添加tabs的相关操作 chrome.tabs.query
，同时能够扩展浏览器本身的功能；当浏览器提供的功能已经无法满足你的需求，就需要你通过C/C++这样的编译语言来扩展浏览器的功能，例如我们常用的Flash 插件，Chrome Plugin工作在内核层面。...创建生成，当浏览器打开时，会自动加载插件的background.js文件，它独立于网页并且一直运行在后台，它主要通过调用浏览器提供的API和浏览器进行交互； popup.html则不同，它有内容，是一个实实在在的页面...2）渲染进程主要运行Web Page,当打开页面时，会将content_script.js加载并注入到该网页的环境中，它和网页中引入的Javascript一样，可以操作该网页的DOM Tree，改变页面的展示效果...实例3：标签控制 使用chrome.tabs API与浏览器的标签系统进行交互，可以查询，创建、修改和重新排列浏览器中的标签页;我们在使用浏览器时，经常会打开很多标签页，显得很混乱，中途想要找打开的某个页面时...text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=] 我们甚至可以通过tabs 实现页签之间的交互
2.相比也网页有更多的功能特性，支持调用 Chrome 浏览器原生API，可跨浏览器 Tab 运行，生命周期不会不随着页面关闭而结束。...交互界面与组成模块 一个扩展的组成模块如下图所示，整个 Chrome 扩展主要包含六个模块：扩展图标、插件弹窗、选项页、单独页、注入页面脚本、后台脚本。...绝大多数 chrome.* api 都是异步的，如果需要拿到异步执行的结果，需要传入 `callback` 方法。 下面象征性的举个例子，来描述一下一个插件的执行和交互。...这段代码是位于“后台脚本”的一段代码，大概意思就是当扩展安装加载完成之后将 color 变量存储在本地 storage 中。...> 下面这段代码是弹窗 popup.js 文件的代码，点击按钮之后读取前面 background.js 中设置的颜色值，并设置为 popup.html （扩展弹窗模块）的背景色
首先是比较重要的几个字段 browser_action 这个字段主要负责扩展图标点击后的弹出内容，一般为popup.html content_scripts matches 代表scripts插入的时机...其中包括历史记录、新标签页、书签等......插件中关于devtools的生命周期和F12打开的窗口时一致的，当F12关闭时，插件也会自动结束。...在chrome中，如果你在地址栏输入非url时，会将内容自动传到google搜索上。...在下一篇文章中，我们将会围绕Chrome ext多个维度的安全问题进行探讨，在现代浏览器体系中，Chrome ext到底可能会带来什么样的安全问题。
background.htm是一个始终运行于浏览器后台的页面，浏览器关闭时它才被关闭，可以作为一个监听者 地址栏访问：chrome://extensions/ 载入编写插件的目录 ?...，由导航上的插件按钮点击时载入（里面的脚本开始执行），关闭弹出层时也就关闭了这个网页（里面的代码亦不会再执行） background.htm 在插件启用后浏览器进程存在的情况下开始，浏览器关闭时或插件卸载时结束...被激活时，如何广播消息至各tab页； 2、当激活指定的tab页时，content_scripts如何获取popup.html中存储的相关数据； 当popup.html关闭时，content_scripts...需要通过background.htm赤获取数据，当popup.html激活并获得相关数据后，需要广播消息出去。...但是chrome.tabs.sendRequest方法需要指定tab选项卡的id （tab页的一个标识ID） ?
，可选 "default_title": "这是一个示例Chrome插件", "default_popup": "popup.html" }, // 当某些特定页面打开才显示的图标...，在空闲时被关闭， 什么叫被需要时呢？...比如第一次安装、插件更新、有content-script向它发送消息，等等 popup opup是点击browseraction或者pageaction图标时打开的一个小窗口网页，焦点离开网页就立即关闭...然后找到extension目录 打包 当您为扩展程序打包时，扩展程序将获得唯一的密钥对，扩展程序的标识符基于公钥的散列，私有密钥用来为每一个版本的扩展程序签名，必须严格保护，不能由公众访问。...API 时用到, 并非安装插件时需要 "optional_permissions": ["tabs"], // 允许用户进行某些配置来定制插件功能, 并使用 chrome.storage.sync
在2019年初，微软正式选择了Chromium作为默认浏览器，并放弃edge的发展。...获取一个插件的代码 Chrome Ext的存在模式类似于在浏览器层新加了一层解释器，在我们访问网页的时候，插件会加载相应的html、js、css，并解释执行。...首先是比较重要的几个字段 browser_action 这个字段主要负责扩展图标点击后的弹出内容，一般为popup.html content_scripts matches 代表scripts插入的时机...插件中关于devtools的生命周期和F12打开的窗口时一致的，当F12关闭时，插件也会自动结束。...在下一篇文章中，我们将会围绕Chrome ext多个维度的安全问题进行探讨，在现代浏览器体系中，Chrome ext到底可能会带来什么样的安全问题。
，在空闲时被关闭，什么叫被需要时呢？...popup popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。 ?...扩展可以替代如下页面： 历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history 新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome...URL，造成困扰； 下面的截图是默认的新标签页和被扩展替换掉的新标签页。...如何让popup页面不关闭 在对popup页面审查元素的时候popup会被强制打开无法关闭，只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了。
创建一个新的标签页并打开指定的页面：在浏览器中创建一个新的标签页，并打开扩展程序目录下的 "caption.html" 文件。 这些操作通过监听扩展安装事件，实现初始化逻辑和用户界面的设置。...当一个标签页被移除时，调用 tabRemoved 函数，并传递标签页的 ID 和移除信息。 在 tabRemoved 函数中，检查被移除标签页所在的窗口 ID。...当一个标签页被分离时，调用 tabDetached 函数，并传递标签页的 ID 和分离信息。 在 tabDetached 函数中，记录标签页分离的日志信息。...当一个标签页被激活时，调用 tabActivated 函数，并传递激活信息。 在 tabActivated 函数中，记录激活事件的日志信息。 检查激活信息中是否包含窗口 ID。...当一个新标签页被创建时，调用 checkTab 函数，并传递新创建的标签页信息。 在 checkTab 函数中，记录标签页创建的日志信息。 延迟 300 毫秒后，获取新标签页所在窗口的详细信息。
所以当插件逻辑并不复杂时，通常就将配置文件和插件代码直接放在同一层目录下。插件配置文件中，配置了该插件扩展的描述信息、扩展的功能，以及插件的访问权限。...期望：有个插件，能够记录那些没看完，但又非常想继续看完的文章，即使关闭浏览器，换个浏览器，也能够获取到这些记录，并且打开再次打开文章时，能自动跳转到上次看到的位置。...下次从记录（url栏右侧插件功能点）中进入文章页面时，页面会滚动到上次标记的位置。...() { loadStorage(); bindEvents(); }); function loadStorage() { // 读取storage中的记录并render chrome.storage.sync.get...“检查视图”后的“背景页” ?
Hello World 当用户点击扩展程序工具栏图标时，此扩展程序将显示“Hello Extensions”。...> 现在，当用户点击的操作图标（工具栏图标）时，该扩展程序会显示一个弹出式窗口。...加载未封装的扩展程序 要在开发者模式下加载已解压的扩展程序，请执行以下操作： 在新标签页中输入 chrome://extensions，转到“扩展程序”页面。...前往 进入“扩展程序”页面，然后点击开启/关闭切换开关旁边的刷新图标： 何时重新加载扩展程序 下表显示了需要重新加载的组件才能看到更改： 扩展程序组件 需要重新加载扩展程序 清单 是 Service...创建一个 popup.js 文件，并添加以下代码。
当 Mac 处于唤醒状态时，按住这个按钮 1.5 秒钟会显示一个对话框，询问您是要睡眠、重新启动还是关机。...Fn–上箭头 Page Up：向上滚动一页。 Fn–下箭头 Page Down：向下滚动一页。 Fn–左箭头 Home：滚动到文稿开头 Fn–右箭头 End：滚动到文稿末尾。...Command–调高亮度 开启或关闭目标显示器模式。 Command–调低亮度 当 Mac 连接到多个显示器时打开或关闭显示器镜像功能。 右箭头 打开所选文件夹。这个快捷键仅在列表视图中有效。...左箭头 关闭所选文件夹。这个快捷键仅在列表视图中有效。 Option-连按 在单独的窗口中打开文件夹，并关闭当前窗口。 Command-连按 在单独的标签页或窗口中打开文件夹。...按住 Command 键拖移 将拖移的项目移到其他宗卷或位置。拖移项目时指针会随之变化。 按住 Option 键拖移 拷贝拖移的项目。拖移项目时指针会随之变化。
权限： permissions：列出扩展需要的权限，例如访问标签页、存储等。这决定了扩展可以访问的浏览器功能和用户数据。...后台脚本在浏览器启动时运行，管理扩展的生命周期和处理事件。 浏览器动作： action：定义扩展图标的默认行为，如点击图标时弹出的页面（popup），可以设置默认弹出页面和图标。...常用功能 popup 页面 在 Chrome 扩展中，popup 页面是指当用户点击扩展图标时弹出的界面。这个界面通常用于提供用户交互或展示信息。...持久存储和同步 使用 Chrome 存储 API 在浏览器关闭时保持数据持久化： // 存储数据 chrome.storage.local.set({key: 'value'}, () => { console.log...右键菜单 在 Chrome 扩展中，右键菜单（Context Menu）是指用户右键点击浏览器页面或特定元素时弹出的菜单选项。
o/O：在下一行/上一行插入。 s/S：删除当前字符/当前行并插入。 根据具体的情况使用不用的快捷键，但一般使用较多的为i、a、o、O。...t向后查找一个字符，并移动到该字符的前一个字符；T向前查找一个字符，并移动到该字符的后一个字符。如abcdefg中，tg命令会将光标移动到f处，Ta命令会将光标移动到b处。...在编辑器中上移半页，在网页中，只需要u就可以上移半页，d为下移半页。 移动特定行之类的在网页中，不存在此类操作。 其他移动操作一致，如10j、gg等。 标签操作 针对标签页的操作。...使用x关闭当前标签页，相当于，使用X恢复关闭的标签页，相当于Ctrl+shift+t。 使用页左移，使用>>将当前标签页右移。...在当前页面查找内容，使用/后接需要搜索的内容，类似于Chrome的快捷键。使用n定位到下一个，使用N定位到上一个。 搜索框。
你刚刚制作了一个 Chrome 扩展程序。 覆盖 Chrome 的新标签页 为了在打开新选项卡时迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。...你可以通过在 Chrome 的扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。 ? 重新加载扩展 现在，当你打开新标签页时，你的自定义消息会出现。...要将扩展程序添加到 Chrome，请执行上述相同的步骤，要选择 dist 文件夹作为扩展程序目录。如果一切按计划进行，那么当扩展程序初始化时，你应该看到“Hello world！”消息。...当样板文件将扩展构建到 dist 文件夹中时，它将通过 vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。...，并且每当你打开新标签页时都会看到一个笑话。
当Mac处于唤醒状态时,按住这个按钮1.5秒钟会显示一个对话框,询问您是要睡眠、重新启动还是关机。如果您不想等待1.5秒钟,请按下 Contro-电源按钮或Contro_介质推出键。...Command-调高亮度开启或关闭目标显示器模式。 Command-调低亮度当Mac连接到多个显示器时打开或关闭显示器镜像功能。 右箭头打开所选文件夹。...这个快捷键仅在列表视图中有效 左箭头关闭所选文件夹。这个快捷键仅在列表视图中有效 Option-连按在单独的窗口中打开文件夹,并关闭当前窗口。 Command-连按在单独的标签页或窗口中打开文件夹。...按住 Command键拖移将拖移的项目移到其他宗卷或位置。拖移项目时指针会随之变化。 按住 Option键拖移拷贝拖移的项目。拖移项目时指针会随之变化。...按住 Option- Command键拖移为拖移的项目制作替身。拖移项目时指针会随之变化。 按住 Option键点按开合三角打开所选文件夹内的所有文 件夹。这个快捷键仅在列表视图中有效。
popup -- 弹窗页面 popup 页面也非常好理解，在 manifest.json 的定义里它是 browser_action， 就是我们扩展程序的界面（弹窗页），就是上面的那张截图： 这个界面其实就是一个...事件页面只在需要时加载，当事件页面不活动时就会卸载，以便释放内存和其他系统资源，所以一般而言是推荐使用事件页面。 它存在的目的在于，在扩展的整个生命周期内需要长时间管理一些任务或状态。...runtime.getBackgroundPage 以我上面的 URLHelper 为例子，在这个扩展中，我使用的是持续运行的后台网页，当浏览器页面刷新第一次注入 Content Script 时，会获取到当前页面...url ，然后发送消息并带上 url 信息告诉给 background 后台网页， background 后台网页收到消息后，再转发给 popup 页面。...传递消息时，由于浏览器可能同时打开多个 tab 页，所以需要指定一下传递的页面，指定发送至哪一个标签页。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
