chrome 扩展 popup 弹窗的使用

popup的基本使用方法

popup介绍

popup 是点击 browser_action 或者 page_action图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。

popup配置

V3版本中(V2版本是在 browser_action 中 ),可以通过配置文件(manifest.json)中 action 里面的default_popup 字段来指定 popup 页面,也可以调用 setPopup() 方法。

使用popup的注意事项:

  1. popup 页面的生命周期一般很短,需要长时间运行的代码千万不要写在 popup 里面。
  2. 所有的页面元素都写在 popup.html 中,css 也可以写在 popup.html 中的 <style> 标签里面,当然也可以写在一个单独的css中引入。但是JS 代码必须是一个单独的 JS 文件,在 popup.html<script> 标签中写 JS无效的 。通过<script>标签引入 popup.js 即可。另外,其他的一些库也可引入的,例如: jquery
html 复制代码
<script src="js/JQuery.js"></script>
<script src="js/popup.js"></script>
  1. popup.html 中元素的事件,必须在 popup.js 中使用代码动态绑定。例如:

这样是无法触发的事件的

HTML

html 复制代码
<button οnclick="testClick()">测试按钮<button>

JS

javascript 复制代码
function testClick() { alert("测试点击事件"); }

需要像下面一样动态绑定

HTML

html 复制代码
<button id="testBTN">测试按钮<button>

JS

javascript 复制代码
$("#testBTN").click(function() { alert("测试点击事件"); });
  1. popup.js 中要与web页面通信,permissions 需要 activeTab 权限。
  2. 强制 popup.html 关闭可以使用:window.close();
  3. popup.js 如果要 调试/查看控制台 的话,在弹出的 popup.html 页面,点击鼠标右键,然后选择 检查 即可。通过 F12 打开的是网址页面的控制台,并不是 popup 的。
  4. popup 中可以直接通过 chrome.extension.getBackgroundPage() 获取 backgroundwindow 对象。

popup.js

javascript 复制代码
// 获取具有指定属性的所有标签页,active: true 标签页在窗口中是否为活动标签页;currentWindow 标签页是否在当前窗口中。
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
	// 取出当前标签页的 tag_id, 发送一个消息出去, 同时带上回调函数
	chrome.tabs.sendMessage(tabs[0].id, { action: "info", select_type: select_type }, function (response) {
		// 回调函数(传回的信息)
		if (response.result) {
			// 关闭 popup.html 页面
            window.close();
        } else {
            alert(response.note)
        }
    });
});

content_scripts

javascript 复制代码
chrome.runtime.onMessage.addListener(
	function (request, sender, sendResponse) {
	    if (request.action == 'info') {
	        // 赋值
	        window.select_type = request.select_type;
	        window.all_url = request.all_url;
	        window.user_id = request.user_id;
	        window.password = request.password;
	
	        switch (window.select_type) {
	            case '1':
	            	// code...
	            	// 返回数据
                    sendResponse({
                        result: true
                    });
	                break;
	            case '2':
	                if (1) {
	                    sendResponse({
	                        result: true
	                    });
	                } else {
	                    sendResponse({
	                        result: false,
	                        note: '请填写网址和账号密码'
	                    });
	                }
	                break;
	        }
	    } else {
	        sendResponse({
	            result: false,
	            note: '操作失败'
	        });
	    }
	}
);

其他:

非官方的中文文档:https://chrome.noonme.com/extensions/messaging.html

关于chrome扩展,介绍比较全的一片文章:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

相关推荐
秋名山大前端6 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug6 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636026 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4166 小时前
HTML(面试)
前端
excel6 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴6 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy6 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者7 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王7 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html