chrome 扩展 popup 弹窗的使用

这篇具有很好参考价值的文章主要介绍了chrome 扩展 popup 弹窗的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

popup的基本使用方法

popup介绍

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

chrome 扩展 popup 弹窗的使用,Chrome扩展,chrome,前端

popup配置

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

chrome 扩展 popup 弹窗的使用,Chrome扩展,chrome,前端

使用popup的注意事项:

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

这样是无法触发的事件的
HTML

<button οnclick="testClick()">测试按钮<button>

JS

function testClick() { alert("测试点击事件"); }

需要像下面一样动态绑定
HTML

<button id="testBTN">测试按钮<button>

JS

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

popup 和 content_scripts 通信

popup.js

// 获取具有指定属性的所有标签页,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

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文章来源地址https://www.toymoban.com/news/detail-745239.html

到了这里,关于chrome 扩展 popup 弹窗的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Chrome扩展开发系列开篇

    大家好,我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星。 研究机构 Statcounter 发布了 2023 年 9 月报告,揭示了有关浏览器的最新统计数据。 浏览器 市场份额 Chromium-based? Chrome 63.56% Yes Safari 19.85% No Edge 5.43% Yes Firefox 2.94% No Opera ... Yes 可以看到基

    2024年02月04日
    浏览(48)
  • Chrome扩展之通信

    js类型 介绍 popup 单击插件图标后的弹窗中的js,由于单击图标打开popup,焦点离开又立即关闭,生命周期一般很短。 content-script 与页面共享DOM,但是不共享JS,可访问部分chrome扩展API。 background 权限最高,几乎可调用所有Chrome扩展API(除了devTools),且可以无限制跨域。生命周

    2024年01月23日
    浏览(32)
  • 从零实现的Chrome扩展

    Chrome 扩展是一种可以在 Chrome 浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的 TamperMonkey 、 Proxy SwitchyOmega 、 AdGuard 等等,这些拓展都是可以通过 WebExtensions API 来修改、增强浏览器的能力,用来提供一些浏览器本体没有的功能,从而实现一些有趣的事情。

    2024年02月17日
    浏览(42)
  • Chrome扩展开发实战:快速填充表单

    大家好,我是 dom 哥。我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星 。 填表单是打工人经常面对的场景,作为一个前端,我经常开发一些PC端的页面,它们主要由表单和表格构成,而输入框又是表单里最常见的表单项。 接下来就试着做一个简单的小扩展

    2024年02月04日
    浏览(44)
  • Chrome扩展的核心:manifest 文件(上)

    大家好,我是dom哥。我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以点个小星星。 Chrome 在全球浏览器市场份额独占 6 成,无论是对普通用户还是开发者,都是电脑里的必备利器。Chrome 无论是在性能还是 UI 交互方面都非常出色,而 Chrome 扩展则为开发者提供了接口,

    2024年02月05日
    浏览(40)
  • Chrome扩展的核心:manifest 文件(下)

    大家好,我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星。 在上篇和中篇中已经完成了对 manifest 文件中以下字段的解释: \\\"manifest_version\\\" \\\"name\\\" \\\"version\\\" \\\"description\\\" \\\"icons\\\" \\\"content_scripts\\\" \\\"background\\\" \\\"permissions\\\" 本篇接着说剩下的 manifest 可选字段。 定义

    2024年02月04日
    浏览(46)
  • Chrome扩展的核心:manifest 文件(中)

    大家好,我是 dom 哥。我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星 。 在上一篇中已经完成了 Chrome 扩展的雏形,本篇接着介绍 manifest 中的可选字段,完善扩展的细节。 向 web 页面注入 JavaScript 和 CSS 。可以说这是 Chrome 扩展的灵魂。当指定 content_scri

    2024年02月04日
    浏览(44)
  • Chrome关闭时出现弹窗runtime error c++R6052,且无法关闭

    Chrome 版本121 Win10专业版 Chrome关闭时出现弹窗runtime error c++R6052,且无法关闭 1.任务管理器打开,强制结束进程 2.再次打开谷歌浏览器,打开设置关于Chrome,更新一下浏览器,完成重启浏览器(解决本案例) 3.如果还不行卸载干净浏览器重启电脑后,再下载最新版安装包安装一

    2024年02月22日
    浏览(43)
  • Chrome扩展V2到V3的变化

    Chrome扩展manifest V3变化、升级迁移指南_chrome_ZK645945-华为云开发者联盟 (csdn.net) browser_action 改 为 action。

    2024年02月07日
    浏览(39)
  • Chrome扩展程序是如何进行消息传递的

    大家好,我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星。 一个复杂的 Chrome 扩展程序通常由 content_scripts , background , action popup , side panel , options page , devtools 等部分组成,这些部分所负责的功能各不相同,所处的运行环境各不相同,所能

    2024年02月04日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包