这是本人第二次开发Chrome插件，本次开发主要两个目的，第一是练习Chrome插件开发时各个页面（沙盒）之间的消息传递，第二是在办公室看某些网站不想打开图片（你懂得。。。）...和popup都没有触及，而background、popup和content script三者之间的消息传递如下图所示： ?...而我们这次的消息传递有点击popup.html里隐藏或显示按钮时，将状态传递给content script，content script将页面所有图片隐藏并且把状态传给background.js，永久保存起来...剩下的消息传递还有，web page加载时根据当前用户的设置决定是否显示图片，这里我做的并不是很好，因为我一开始只是把img的display改成none，这确实能使图片隐藏，但是图片还是会加载到页面来，...sendResponse({state: localStorage.state}); } }); 最后的一个消息传递是
接着讲一下各个js之间的通信； backgroud.js是中间商 backgroud.js可以和content_script.js之间相互通信 backgroud.js也可以和popup.js之间相互通信...content_script.js和popup.js之间不能直接通信； backgroud.js和content_script.js通信： 通信的数据预先存储在本地存储中,方便存取 在backgroud.js...中//监听来自content_script的消息，接收消息并回复 chrome.runtime.onMessage.addListener(function(senderRequest,sender,sendResponse...中给backgroud.js发消息，并监听background发来的消息 //初始化bgCommunicationPort window.bgCommunicationPort = chrome.runtime.connect...的消息popup可以通过backgroud.js中转发消息给content_script.js //监听脚本 监听来自popup的消息 chrome.runtime.onConnect.addListener
('background.js') // popup.js console.log('popup.js') // content-script.js console.log('content-script.js...-- 点击事件传递的参数后续会用到，这里可以不去了解 --> <!...、启动就运行的、全局的代码放在 background 里面 popup.js 这个就是点击浏览器右上角的插件图标展示的弹窗，生命周期很短，可以将临时的交互写在这里 对于我们这次要长时间驻存在浏览器后台与服务通信的要求得出...我们将相应的写在 background.js 中即可 我们这里将需要的 js 库 和 background.js 引入到 background.html 中 <script src="....好<em>的</em>，朋友们，我们终于来到了最后一步了 我们现在已经建立起了这 3 个模块间<em>的</em>联系了 现在无非就是要将从后端发送<em>的</em><em>消息</em>通过一些判断做一些 js 操作 我们就来完成一个简单<em>的</em>任务，打开百度页面，搜索关键字
下面我们来具体讲解一下浏览器插件开发的核心概念. 2.核心知识点 浏览器插件一般涉及以下几个核心文件: manifest.json 用来配置所有和插件相关的配置(必须放在根目录) background.js...popup 点击插件图标后打开的自定义窗口, 用来处理用户交互 笔者画了一张简图来大致表示一下它们之间的关系: ?...和content_script或者popup页面进行消息通信 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse...由于popup窗口也是一个网页,所以我们一般会建立一个popup.html和popup.js用来控制popup的页面展示和交互.我们在manifest.json中配置如下: { "page_action...这里我们主要关注popup.js和content_script.js, popup.js中主要用来获取从content_script页传过来的图片数据，并展示在popup.html中，另外又一个需要注意的是当页面没有注入生成按钮时
background.html 和 background.js 可以理解为后台，同时这个页面会一直常驻在浏览器中，而主要 background 权限非常高，几乎可以调用所有的 Chrome 扩展 API...}, function (response) { console.log('收到来自后台的回复：' + response) }) //background.js 或 popup.js： // 监听来自...content和页面内的脚本（injected自然也属于页面内的脚本）之间唯一共享的东西就是页面的 DOM 元素，有 2 种方法可以实现二者通讯，： 可以通过window.postMessage和window.addEventListener...chrome.storage的值，然后进行事件绑定为修改配置后在记录一下配置。...ajax 请求，因为在 content 内进行 ajax 请求，是会在控制台输出跨域请求拦截，或者是 HTTPS 访问 HTTP 不安全等问题，这时候就需要通过消息通信，将 content 要发送的请求发送给
1.先在contentScript里面创建一个端口，并且发送一个消息 contentScript.js saveDetail() { var port = chrome.extension.connect...~" } }); //这里主要是为了接受回传的值 port.onMessage.addListener((msg) => { if ...里面接受，并且进行api访问，拿到结果再回传给contentScript background.js chrome.extension.onConnect.addListener(function (port...{ port.postMessage({ res }); }); } }); } }); 3.添加popup向contentScript发送消息的实例...popup.js chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { chrome.tabs.sendMessage
接着我看了这篇文章，对content.js、background.js、popup.js之间的通信，有了一个浅显的了解。...可以写点击事件，传递给content.js，而content.js可以获取到当前页面的dom元素，这样我就可以获取到当前页面的title和url，实现第一个功能；background.js则可以拿到所有的标签页信息...popup.js点击第一个按钮，发送消息给content.js，content.js接受消息后，判断消息内容是第一个按钮发送过来的，用document.title和window.location.href...还是popup.js，点击第二个按钮，发送消息给content.js，然后根据对应的action，进入第二个条件，向background.js发送消息，background.js接受消息后，获取所有tabs...我的提问是：content.js发送一个指定消息给background.js，background.js接受消息后，获取所有tab页面的title和url，返回给content.js，怎么写得到的结果让人有些迷糊
image.png 调试popup.js的方法 通过弹窗，在弹窗内部点击右键，选择审查内容 通过插件图标，进行点击鼠标右键，选择审查弹出内容 通过background打开独立页面 基于background...通过使用标准的文档对象模型(DOM)，它能够读取浏览器访问的网页的详细信息，可以对打开的页面进行更改，还可以将DOM信息传递给其父级插件。...动态配置注入 在特定时刻才进行注入，比如点击了某个按钮，或者指定的时刻 需要在popup.js或background.js中执行注入的代码。...页面之间进行数据通信 如需将单条消息发送到扩展程序的其他部分并选择性地接收响应，请调用 runtime.sendMessage()[7] 或 tabs.sendMessage()[8]。..." ], } 然后在background.js脚本中进行创建 // background.js chrome.notifications.create(null, { type: "basic
，发现其中代码功能是ajax获取当前访问的网页内容，并传递给扩展。...然后通过 chrome.extension.sendMessage(data) 传递给我们的插件。 ...其中有一个background.js，它接受到了浏览器页面传递来的data数据，然后对它进行处理。 打开background.js文件，略长，我们只分析web指纹那个部分。...内层还有一个for in循环，进行多个条件下的匹配。...打开发现就是一个什么内容都没有的html，但最后加载了js/popup.js这个脚本。这个脚本就是把technologyData中的内容取出来，写到popup.html里，让用户看。
我使用的是一个background.js文件： function _back() { console.log('background.js') } console.log('running...'...点进去看看里面装的什么玩意： ? 没错，是一个普通的后台页面，如果background.js和其他页面有通信，则可以在这里进行查看请求或者调试代码。 如果使用page选项，打开也是这个样子。...同时命中了2个规则，所以content.js和other.js都会运行，顺序也是正确的。.../js/popup.js"> content-scripts和background通信 content-scripts可以通过 chrome.runtime.sendMessage...3.如果popup和background都监听了从content发来的消息，两者都能收到监听消息，但是callback只会触发一次，被谁触发取决与谁先发送。
使用 Rust 编写的 Lambdas 在 AWS IoT 和 SQS 队列之间传递消息 AWS IoT Core 提供了一种方便的方式将 ESP32 等 IoT 设备连接到云。...我们在使用 Rust 将那些 MQTT 消息传输到其他实际上可以对它们有用的服务,如 AWS SQS 队列，这样我们就可以实现监测楼层温度等等。...在此过程中，我们介绍了一些常见的 Rust 并发原语，例如 Mutex 和 Condvar。 YouTube地址：https://www.youtube.com/watch?...v=b4mS5UPHh20 使用 Rust 和 SDL2 构建一个 iOS 项目 博客原文：https://blog.aclysma.com/rust-on-ios-with-sdl2/ 教程：使用 WebAssembly..., Rust 和 WASI 编写 Deno 应用 教程中，我们将用 Rust 编写高性能函数，将它们编译成 WebAssembly，并在你的 Deno 应用程序中运行它们。
它不需要与其他界面或者脚本进行交互和信息传递，扩展帮你做的就是自动注入这个脚本而需要你每次手动注入。...然后： 重点，这个 popup 页面完全由我们控制，就像一个普通的 Web 页面，我们可以利用 Chrome 的消息传递机制利用这个页面和 Content scripts 进行交互，也就可以完成对页面的某些控制...信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...扩展程序（弹窗页面和后台页面）和内容脚本间的通信使用消息传递的方式。 两边均可以监听另一边发来的消息，并通过同样的通道回应。消息可以包含任何有效的 JSON 对象。....* API 消息传递，主要使用了 Chrome 浏览器的内置 chrome 对象进行。
看完之后对chrome插件的基本配置和文件结构会有一个大致的认识，同时也学会了如何在chrome上加载自己在本地开发的插件。...上图中，content_script和background的脚本运行环境不一样，通过message来进行通讯。...该页面负责展示和删除保存的记录，页面主要逻辑如下: // popup.js in popup.html document.addEventListener('DOMContentLoaded', function...}); } 3.4 content_script content_script主要有两个功能： 在页面中操作（新增 、滚动到指定位置、删除）记录坐标的元素 ； 向background发送坐标消息和删除坐标的消息...： 添加右键菜单 接收content_script发来的消息并处理 // background.js function createMenu() { // 添加右键菜单 var
本篇文章主要是从开发者角度来对其进行介绍，帮助开发者对 Chrome 扩展的结构和开发方式有个大致了解，快速入门。...matches 字段表示需要注入脚本的网站地址规则，js和css字段分别表示注入页面的 js 代码和 css 代码。...> 下面这段代码是弹窗 popup.js 文件的代码，点击按钮之后读取前面 background.js 中设置的颜色值，并设置为 popup.html （扩展弹窗模块）的背景色...各个模块之间的交互交流方式都不一样，我们只需要大概明白他们之间可以做到互相通讯。至于用法，在开发的过程中边查询边了解即可。...如果拖拽安装失败，也可以将其后缀手动改为 “.zip”，然后使用unzip解压软件进行解压，再通过开发者模式进行加载。 最后，插件虽好，但是要注意使用安全。
浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。 好消息是浏览器扩展并不难写。...创建一个名为 hello-world-chrome 的新文件夹和两个文件：manifest.json 和 background.js： 1mkdir hello-world-chrome 2cd hello-world-chrome...要将扩展程序添加到 Chrome，请执行上述相同的步骤，要选择 dist 文件夹作为扩展程序目录。如果一切按计划进行，那么当扩展程序初始化时，你应该看到“Hello world！”消息。...manifest 文件和 background.js 对于我们来说是熟悉的，但也要注意包含Vue 组件的 popup 文件夹。.../background.js', 3 'popup/popup': './popup/popup.js', 4 'tab/tab': '.
在这些文件中，有一个manifest.json文件，它是扩展的描述文件，定义了扩展的名称和版本号等信息。...两者通过persistent属性进行区分。...界面，我们可以通过browser_action属性进行配置，通过此属性，我们可以设置扩展的图标，设置点击弹出的页面。...扩展的调试 在我们本地开发好扩展之后，我们可以通过本地浏览器进行调试。 首先，我们需要先进入扩展程序页面，打开开发者模式 然后，我们可以通过选择加载已解压的扩展程序加载我们的扩展。...，用到的知识都是基础的js，html，css，我们只需要知道一些和浏览器交互的属性和操作的api，就可以开发出一个属于自己的浏览器扩展。
翻译过来是Chrome插件，和Chrome扩展插件很相近，特别容易搞混，那么他们之间有什么区别呢？...，彼此之间如何进行通信？...创建生成，当浏览器打开时，会自动加载插件的background.js文件，它独立于网页并且一直运行在后台，它主要通过调用浏览器提供的API和浏览器进行交互； popup.html则不同，它有内容，是一个实实在在的页面...； 3）浏览器进程在这里更多起到桥梁作用，作为中转可以实现Extension Page和Content_script.js之间的消息通信。...chrome.webRequest API只能在background.js中使用，所以可以通过图片拦截，将链接通过消息传给当前页面的content_script.js，然后在content_script.js
它不需要与其他界面或者脚本进行交互和信息传递，扩展帮你做的就是自动注入这个脚本而需要你每次手动注入。...重点，这个 popup 页面完全由我们控制，就像一个普通的 Web 页面，我们可以利用 Chrome 的消息传递机制利用这个页面和 Content scripts 进行交互，也就可以完成对页面的某些控制...扩展程序（弹窗页面和后台页面）和内容脚本间的通信使用消息传递的方式。两边均可以监听另一边发来的消息，并通过同样的通道回应。消息可以包含任何有效的 JSON 对象。...各种类型的消息传递都是通过这个 chrome 对象进行，分为： 简单的一次性请求 长时间的连接 跨扩展程序消息传递 从网页发送消息 原生消息通信 当然，对于通常而言的普通扩展程序而言，简单的一次性请求就足够我们使用了...popup 弹窗页面 # popup.html 页面内引入的 popup.js let obj = { msg: '从 popup 弹窗页面 向 Content Script 传递消息',
，就是扩展的图标～～～ popup.html 点击扩展图标，弹出的面板页面（如果在manifest.json中配置了default_popup为该文件的话） popup.js popup.../public/js/background.js"] } } chrome_url_overrides chrome_url_overrides 属性可以自定义的页面替换 Chrome 相应默认的页面...，比如新标签页（newtab）、书签页面（bookmarks）和历史记录（history）。...(function(request, sender, sendResponse) {}); background发送消息： chrome.tabs.sendRequest(tab.id, data,...function(data) {}); 相反～～～ background监听消息： chrome.extension.onRequest.addListener(function(request,
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
