首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Chrome扩展-- externally_connectable和任何在安装时设置"matches“条目的方法

Chrome扩展-- externally_connectable和任何在安装时设置"matches"条目的方法是用于实现Chrome扩展与外部网页或其他扩展之间的通信。通过设置"externally_connectable"字段和"matches"字段,可以定义允许与扩展通信的外部网页或其他扩展的范围。

具体来说,"externally_connectable"字段是在扩展的清单文件(manifest.json)中进行设置的,用于指定允许与扩展通信的外部源。它可以包含一个或多个URL模式,用于匹配外部源的URL。这些URL模式可以使用通配符(*)进行模糊匹配,以便匹配多个URL。

"matches"字段是在扩展的清单文件中设置的,用于指定在安装扩展时需要匹配的URL模式。这些URL模式用于确定哪些网页或扩展可以与该扩展进行通信。

通过使用"externally_connectable"和"matches"字段,可以实现以下功能:

  1. 与特定的外部网页进行通信,例如与特定域名下的网页进行交互。
  2. 与其他扩展进行通信,例如与特定扩展之间共享数据或调用其功能。

应用场景:

  1. 在开发一个多功能的Chrome扩展时,可以使用externally_connectable和matches来实现与外部网页或其他扩展的集成,以提供更丰富的功能和用户体验。
  2. 在开发一个协作工具或社交媒体扩展时,可以使用externally_connectable和matches来实现与其他网页或扩展的实时通信,以便共享数据或进行实时协作。
  3. 在开发一个安全扩展时,可以使用externally_connectable和matches来限制与扩展通信的外部源,以确保只有经过授权的网页或扩展可以与之交互。

腾讯云相关产品和产品介绍链接地址:

腾讯云提供了一系列云计算相关的产品和服务,以下是一些相关产品和其介绍链接地址:

  1. 云服务器(CVM):提供可扩展的计算能力,支持多种操作系统,适用于各种应用场景。详细信息请参考:https://cloud.tencent.com/product/cvm
  2. 云数据库(CDB):提供高可用、可扩展的数据库服务,支持多种数据库引擎,适用于各种应用场景。详细信息请参考:https://cloud.tencent.com/product/cdb
  3. 云存储(COS):提供安全、可靠的对象存储服务,适用于存储和管理各种类型的数据。详细信息请参考:https://cloud.tencent.com/product/cos
  4. 人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等,帮助开发者构建智能应用。详细信息请参考:https://cloud.tencent.com/product/ai
  5. 物联网(IoT):提供全面的物联网解决方案,包括设备接入、数据管理、应用开发等,帮助实现智能物联网应用。详细信息请参考:https://cloud.tencent.com/product/iot
  6. 区块链(BCS):提供安全、高效的区块链服务,支持快速搭建和管理区块链网络,适用于各种区块链应用场景。详细信息请参考:https://cloud.tencent.com/product/bcs

请注意,以上链接仅供参考,具体的产品和服务详情请访问腾讯云官方网站获取最新信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浏览器插件开发-manifest文件解读「建议收藏」

Extension API 360浏览器的插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库 案例 如何实现网页Chrome插件之间的通信...matches: ["http://"] 指定匹配的网址, js 设置注入脚本 css 设置注入样式 run_at 定义注入要本的时机 document_idle 表示浏览器帮你把握时机,会在 DOM...extension~'}); } }); 13. offline_enabled 扩展是否需要离线工作,默认为 true, 当chrome 检测到离线,程序会被高亮显示 14. permissions...[permissionName] API,全部的权限字符串可以点击上边链接查看,一下列出常用的权限 activeTab 允许用户在调用扩展临时访问当前活动的选项卡, background 后台权限...(例如,) 只有扩展包内的脚本资源才会被加载!

2.5K20

chrome浏览器扩展v3版本配置项整理备忘

": "__MSG_Plugin_Desc__", //默认语言(如果当前浏览器设置的语言不存在多语言配置文件,则默认中文),Chrome插件的多语言只能根据当前浏览器设置的语言来设定,无法通过代码更改语言...“背景页”也将变成“Service Worker”,改动之后background.js将浏览器完全分离,即无法调用windowducoment对象 //可以看介绍: //1、//developer.chrome.com...": "document_end" } ], //API权限,需要使用某些API需要设置该API权限才行 "permissions": [ "contextMenus...“Service Worker”将显示无效, //且无法点开“Service Worker”的开发者工具控制台以及点击插件图标触发的这个方法会报错:chrome.action.onClicked.addListener...方法如下 首先,需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息,相当于白名单,只有在白名单中的站点发送的消息

47240
  • Chrome Extension

    background的权限非常高, 几乎可以调用所有的Chrome扩展API(除了devtools), 而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS event-pages...比如第一次安装、插件更新、有content-script向它发送消息,等等 popup opup是点击browseraction或者pageaction图标打开的一个小窗口网页,焦点离开网页就立即关闭...但是这种方法极度低效, 直接chrome://extensions/找到你插件的ID ?...然后找到extension目录 打包 当您为扩展程序打包扩展程序将获得唯一的密钥对,扩展程序的标识符基于公钥的散列,私有密钥用来为每一个版本的扩展程序签名,必须严格保护,不能由公众访问。..."keyword": "aString" }, // 其他需要的 permission, // 在使用 chrome.permissions API 用到, 并非安装插件需要 "optional_permissions

    2.8K30

    chrome插件 DIY

    当你打开chrome的“扩展程序”界面,看着琳琅满目的插件,有没有想过亲自动手,打造一个自己的插件呢?当然,这种想法不应该是闲着某个部位疼,刻意的去开发一个连自己都不会实际使用的插件。...看完之后对chrome插件的基本配置和文件结构会有一个大致的认识,同时也学会了如何在chrome上加载自己在本地开发的插件。...所以当插件逻辑并不复杂,通常就将配置文件插件代码直接放在同一层目录下。插件配置文件中,配置了该插件扩展的描述信息、扩展的功能,以及插件的访问权限。...那么有没有一种好的方法,可以保存这些数据,并且在同一个google账号上共享呢?还真有:chrome.storage。官方文档中详细介绍了其用法,以及如何在同账号不同浏览器上自动同步数据。...基于chrome.storage,本插件的各种扩展点的数据流操作图如下: ? 上图中,content_scriptbackground的脚本运行环境不一样,通过message来进行通讯。

    2.2K20

    chrome插件 DIY

    当你打开chrome的“扩展程序”界面,看着琳琅满目的插件,有没有想过亲自动手,打造一个自己的插件呢?当然,这种想法不应该是闲着某个部位疼,刻意的去开发一个连自己都不会实际使用的插件。...看完之后对chrome插件的基本配置和文件结构会有一个大致的认识,同时也学会了如何在chrome上加载自己在本地开发的插件。...所以当插件逻辑并不复杂,通常就将配置文件插件代码直接放在同一层目录下。插件配置文件中,配置了该插件扩展的描述信息、扩展的功能,以及插件的访问权限。...那么有没有一种好的方法,可以保存这些数据,并且在同一个google账号上共享呢?还真有:chrome.storage。官方文档中详细介绍了其用法,以及如何在同账号不同浏览器上自动同步数据。...基于chrome.storage,本插件的各种扩展点的数据流操作图如下: ? 上图中,content_scriptbackground的脚本运行环境不一样,通过message来进行通讯。

    3K60

    【JS 逆向百例】浏览器插件 Hook 实战,亚航加密参数分析

    当然,如果你想深入研究浏览器插件的开发,可以参考 Google Chrome 扩展文档 Firefox Browser 扩展文档。...到此我们浏览器插件就编写完成了,接下来介绍如何在 Google Chrome Firefox Browser 中使用。...在浏览器地址栏输入 about:addons 或者依次点击右上角【打开应用程序菜单】—>【扩展主题】,也可以直接使用快捷键 Ctrl + Shift + A 来到扩展页面,在管理您的扩展目录旁有个设置按钮...TamperMonkey 可以直接在各大浏览器扩展商店里面安装,也可以去 TamperMonkey 官网进行安装安装过程这里不再赘述。...一般将其设置为 document-start 重新来到航班查询页面,启用 TamperMonkey 脚本,如果配置正确的话,就可以看到我们编写的 Hook 脚本已开启,随便输入出发地目的地,点击查找航班

    5.2K00

    教你用油猴脚本浏览器插件玩转界面交互!

    在日常浏览网页,我们有时会遇到一些不太满意的网站界面交互设计。然而,作为普通用户,我们并没有网站的源码,如何在这种情况下进行界面改造呢?...以Chrome浏览器为例,可以按照以下步骤操作: 打开Chrome浏览器,进入Chrome Web Store。 搜索“Tampermonkey”,点击“添加至Chrome”按钮进行安装。...安装完成后,浏览器右上角会出现一个油猴的图标。 编写安装用户脚本 安装好油猴插件后,我们可以开始编写用户脚本。...浏览器插件(也称扩展或插件)是用来扩展浏览器功能的小程序。与油猴脚本类似,浏览器插件也可以修改网页的内容行为,但其功能更强大,可以实现更加复杂的操作。...打开Chrome浏览器,进入“扩展程序”页面(chrome://extensions/)。 打开“开发者模式”,点击“加载已解压的扩展程序”,选择刚才创建的文件夹。

    48210

    简单说 如何做一个chrome 去广告插件

    说明 Chrome插件又称为谷歌浏览器插件,是谷歌Chrome浏览器的扩展插件,使用Chrome插件可以为Chrome浏览器带来一些功能性的扩展,进而提高Chrome的使用体验。...之后,都是2 version :插件的版本号 description:插件描述 browser_action:设置扩展信息栏的图标、图标悬浮提示、点击图标弹出窗口,我这里设置设置的是默认图标...(default_icon)默认标题(default_title) icons:插件图标,需准备16*16(扩展信息栏)、48*48(扩展管理页面)、128*128(用在安装过程中)像素的三个图标文件...content_scripts 中的 matches 属性定义了哪些页面会被注入脚本。...安装之后我们就能在扩展程序中看见,我们做的插件了。 ? 然后当我们进入CSDN 网站, class 为 tracking-ad 的元素 就会隐藏起来了。

    1.3K40

    Chrome扩展程开发初探

    Chrome拓展是扩展浏览器功能的小程序,用户可以通过Chrome Web Store下载安装。这些拓展能够增强浏览器的性能用户体验,例如广告拦截、实时翻译、任务管理、笔记记录等。...后台脚本在浏览器启动时运行,管理扩展的生命周期处理事件。 浏览器动作: action:定义扩展图标的默认行为,如点击图标弹出的页面(popup),可以设置默认弹出页面图标。...常用功能 popup 页面 在 Chrome 扩展中,popup 页面是指当用户点击扩展图标弹出的界面。这个界面通常用于提供用户交互或展示信息。...; }); }); background background.js 文件是 Chrome 扩展的后台脚本,用于处理长期运行的任务、事件状态管理。它在浏览器的后台运行,并且在浏览器启动加载。...处理安装事件 在扩展安装或更新执行一些初始化操作: chrome.runtime.onInstalled.addListener((details) => { if (details.reason

    7810

    写html页面没意思,来挑战chrome插件开发

    谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序,可以为用户提供额外的功能定制化的体验。谷歌浏览器插件通常由HTML、CSSJavaScript组成,非常利于前端开发者。...version:本插件的版本,发布相关 action:点击图标设置一些交互 16、32、48、128 default_icon:展示图标 default_popup:popup.html,一个弹窗页面...document_end:dom加载完成之后 exclude_matches:排除匹配到的url地址。作用matches相反。...页面之间进行数据通信 如需将单消息发送到扩展程序的其他部分并选择性地接收响应,请调用 runtime.sendMessage()[7] 或 tabs.sendMessage()[8]。...通过这些方法,您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息,或者从扩展程序向内容脚本发送。如需处理响应,请使用返回的 promise。

    34411

    解密 JS 参数:逆向工程的实用技巧

    大部分网站都会对关键参数进行加密,JS 逆向,我们首要任务是定位参数具体的加密逻辑 常见方式包含:关键字搜索、堆栈调试、XHR 及事件监听、AST 内存漫游、JS Hook 注入等 本篇文章以 JS...Hook 注入定位 Cookie 中某个加密参数为例进行讲解 Cookie 监听 编写一个 Chrome 插件( V3 版本)监听浏览器 Cookie 值的变动,当 Cookie 的 Name 匹配执行...((request) => { if (request.action === "debugger") { debugger; } }); 将编写好的 Chrome 插件安装到浏览器上,...cookie_name"; //Hook Cookie Set //注意:这种方法可能与某些网站的JavaScript代码不兼容,因为它依赖于废弃的__defineSetter__方法 function...浏览器中安装扩展后,打开浏览器开发者工具目前网站,一旦目标 Cookie 被设定一个值后,会自动进入断点模式 在调试模式下,我们就可以在 Source 面板利用 Call Stack 调用栈一步步查询到加密参数生成的具体逻辑

    46730

    如何使用 React、TypeScript、TailwindCSS Vite 创建 Chrome 插件

    创建一个 Chrome 插件是一个有趣的项目,特别是当结合使用强大的工具如 React、TypeScript、TailwindCSS Vite 在这篇文章中,我们将逐步引导完成整个过程,了解如何在...通过本文将拥有一个功能齐全的扩展,并具备扩展它的知识。 设置开发环境 安装 Node.js npm 首先,从官方网站下载并安装 Node.js。这也会安装 npm,你将使用它来管理项目依赖项。...弹出 UI:点击扩展图标出现的界面。 将 React 与 Vite 集成 在 Vite 中设置 React 创建 Vite 项目后,导航到项目目录并运行 npm install。...要测试你的扩展,打开 Chrome 并导航到 chrome://extensions。启用 开发者模式 并点击 加载已解压的扩展程序。选择项目的 dist 文件夹。...结论 使用 React、TypeScript、TailwindCSS Vite 创建一个 Chrome 插件是提升开发技能的好方法,并通过尝试新功能技术不断学习。

    16910

    如何实现一个谷歌浏览器插件

    如何实现一个谷歌浏览器插件 一、什么是Chrome插件? ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序,比如说vue-devtool。...准确的说,其实更应该叫做Chrome扩展,因为插件是更偏向于底层的技术。Chrome插件本质上来说,就是利用WEB开发技术,包括HTML、CSSJS等开发出来的web页面,用来增强浏览器的功能。..."48": "img/icon.png", // 显示在扩展程序管理页面上 "128": "img/icon.png" // 在安装Chrome Webstore...chrome.runtime.onInstalled.addListener(function() { // 在页面跳转,移除旧的规则加入新的规则 chrome.declarativeContent.onPageChanged.removeRules..., sender, sendResponse) {…} ) 二、popupbackground之间 可以直接获取background实例,然后直接里面定义的方法 var bg = chrome.extension.getBackgroundPage

    1.4K31

    Postman接口测试之0基础入门教程

    一、安装过程 1.打开chrome的‘更多工具’--‘扩展程序’中安装Chrome浏览器安装过程请自行百度下载安装) 图1 2.搜索Postman找下面的应用安装(不能上Google...的童鞋请自行访问外国网站,你懂得···) 图2 3.安装好之后在扩展程序里面可以看到,点击详细信息,创建快捷方式 图3 4.快捷图标如下 图4 二、postman...完成验证代码的编写 >点击Send按钮,重新发送请求,并执行测试:Tests(1/2) 验证接口参数 四、发送POST请求 1.POST表单提交示例: 表单提交示例 上图示例中设置了请求方法.... 3.XML提交示例: XML提交示例 上图中,当我们选择了XML(text/xml),postman同样帮我们自动设置了Content-Type,可以自行的去查看Headers....4.自行设置Content-Type: >HTTP的POST请求的参数,都是放在请求正文中的,只是根据Content-Type来判断请求正文的格式,那么我们同样可以在表单提交,选择raw,然后自行设置

    60530

    使用TamperMonkey解决Google被墙stackoverflow无法正常使用的问题

    我之前接触过一个Chrome的插件叫 TamperMonkey,这个工具允许用户自己创建js脚本并挂载到目标网页上,以实现修改网页样式、行为的目的。...安装TamperMonkey TamperMonkey为主流浏览器(Chrome, Microsoft Edge, Safari, Opera Next, Firefox)都提供了插件,...我们先给浏览器安装TamperMonkey插件,我用的Chrome,但是由于Google被墙(可恶的*),我们不能通过Google Web Store安装,所以只能从第三方下载并手动安装。...新增脚本后,我们还需要对脚本的使用场景做一些设置。...首先我们需要设置脚本运行的时间点,我们希望在google的jquery script刚被添加到DOM中就替换它,但是在查阅了大量的资料后我发现这个做不到(如果有人知道怎么做,欢迎留言),所以我们只能选择在尽量早的时间点去执行脚本

    2.5K61

    chrome扩展应用开发快速科普

    从官方的介绍我们可以了解,Options部分就是我们对于扩展的管理功能。我们能够通过一个模块来对chrome扩展应用的设置和数据进行处理。...配置文件(Manifest File) 首先,在进行具体的功能开发,我们需要来看下我们的项目配置文件。这个配置文件在整个chrome扩展应用中非常重要,包含了项目的属性、配置、权限资源信息。...我所开发的扩展应用主要是使用到了右键菜单存储权限 content_scripts Content Script文件 matches字段表示Content Script文件生效的域名 options_page...接下来让我们来看下我们的“设置”页面应该怎么开发。 管理已有表情(Options) 通过Options,我们能够给chrome扩展应用开发一个“设置”页面。...总结 我们通过一个简单的表情插件的例子来快速的介绍了chrome扩展应用的各个模块的功能开发方法。通过这篇文章大家应该知道了chrome扩展应用各个模块的作用开发的方法

    96110

    Chrome插件开发之制作豆瓣电台歌词

    chrome插件,所以首先恶补了一上午,再者我们还需要知道从哪里根据歌曲名歌手名获取歌词,感谢po主给我们推荐了http://geci.me/api/lyric/,这个好用的接口,我们可以在url后加上...我们这次是开发基于page_action的chrome插件,不知道的同学,可以上chrome插件开发文档看看。 以下是本项目的文件结构: ?...= '900px';//下面几行是设置css lyrics_div.style.backgroundColor = '#F00'; lyrics_div.style.zIndex =...代码打包后的插件下载地址:http://download.csdn.net/detail/xanxus46/7127063 插件安装: 首先打开扩展程序页面: ?...然后把下载压缩包里的douban lyric.crx拖到扩展程序的页面里安装,然后打开豆瓣就能看到效果了。

    70530

    谁说Windows下无法做生信分析(植物miRNA gene预测给你看)

    因此就有本文,记录了在测试的所遇到的坑。...基于比较基因组方法代表性研究是Jones-RhoadesBartel (2004)利用拟南芥水稻全基因组鉴定在两个物种中保守的miRNA序列。...基于大规模测序数据的发掘方法 今天的推送介绍一下比较基因组中所开发使用了 MirCheck 程序如何在本地运行的吧。 README 以下操作步骤均在 win10 64位系统下测试demo数据通过。...第一个问题需要将 touch 改为 echo test>,这是windows下的使用方法。 第二个问题竟然是默认我安装了 patscan,你咋不在 REQUIREMENTS 说呢! ?...然后默默地再安装: patscan下载地址 http://www.theseed.org/servers/downloads/scan_for_matches.tgz 安装也会遇到问题... ?

    1.3K30

    Chrome扩展开发入门

    而提到 Chrome 就绕不开它的扩展,或者叫插件(Chrome Extension)。 可以从 应用商店下载安装。应用商店除了有 Chrome 扩展程序,也有丰富的 Chrome主题背景。...具体用法很简单,打开 —— 下载 —— 安装 即可,这里不做详细介绍。 本篇文章主要是从开发者角度来对其进行介绍,帮助开发者对 Chrome 扩展的结构开发方式有个大致了解,快速入门。...matches 字段表示需要注入脚本的网站地址规则,jscss字段分别表示注入页面的 js 代码 css 代码。...绝大多数 chrome.* api 都是异步的,如果需要拿到异步执行的结果,需要传入 `callback` 方法。 下面象征性的举个例子,来描述一下一个插件的执行交互。...,并设置为 popup.html (扩展弹窗模块)的背景色。

    4K30
    领券