开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Chrome扩展程序:从background.html打开popup.html的编程方式？

在Chrome扩展程序中，从background.html打开popup.html的编程方式可以通过以下步骤实现：

在扩展程序的manifest.json文件中，设置扩展程序的浏览器操作（browser_action）或页面操作（page_action），并指定其图标和标题。例如：{ "manifest_version": 2, "name": "My Extension", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_title": "Click to open popup" }, "permissions": [ "activeTab" ], "background": { "scripts": ["background.js"], "persistent": false }, "icons": { "48": "icon.png" }, "page_action": { "default_icon": "icon.png" } }chrome.browserAction.onClicked.addListener(function(tab) { chrome.windows.create({ url: "popup.html", type: "popup", width: 400, height: 300 }); });<!DOCTYPE html> <html> <head> <title>Background Page</title> <script> function openPopup() { chrome.windows.create({ url: "popup.html", type: "popup", width: 400, height: 300 }); } </script> </head> <body> <button onclick="openPopup()">Open Popup</button> </body> </html>通过以上方式，可以在background.html文件中打开popup.html文件。
在background.js文件中，监听浏览器操作或页面操作的点击事件，并在事件处理函数中打开popup.html。例如：
在background.html文件中，添加一个按钮，并为其设置点击事件，在点击事件处理函数中打开popup.html。例如：

相关搜索:如何以编程方式从background.html打开chrome扩展弹出窗口从chrome扩展程序访问当前的html页面如何从Angular PWA应用程序以编程方式打开gps？有没有办法以编程方式打开/关闭Chrome上的实时字幕？在Chrome扩展中以编程方式触发Vue Js应用的按钮点击事件如何在chrome扩展中以编程方式转到youtube视频中的特定时间？Android Studio -从默认目录应用程序(以编程方式)打开epub + pdf文件如何从附加的片段中以编程方式打开主导航抽屉？如何以编程方式打开从Electron DesktopCapurer.getSources获得的窗口如何使用filepath从按钮以编程方式打开应用程序？Swift 4，MacOS 10.13+如何从android中以编程方式打开的覆盖权限屏幕导航回来？以编程方式切换到Google Chrome中的标签,如果找不到标签,则打开网址如何在macOS (而不是iOS)的SwiftUI中以编程方式从后台打开应用程序窗口？Android以编程方式打开所有控制绘制权限的应用程序的设置页面从google chrome扩展到Laravel 5.5应用程序的Ajax post请求从Chrome扩展程序中的background.js读取控制台消息的位置？如何以编程方式从Firebase中获取应用程序的崩溃频率？如何以编程方式从启动程序中删除应用程序(在有根的设备上)如何以编程方式从spring应用程序中获取.key文件的路径？如何以编程方式检测ionic应用程序中的飞行模式是否处于打开状态

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

直接将脚本注入到页面中，但是也可以包含CSS文件，但是在注入CSS文件时，要小心，否则会覆盖网页原本的样式。content-scripts中的JS程序和原始页面共享DOM，但是和原始页面的JS不是在同一个环境下运行的，所以我们是无法访问到原始页面中定义的变量的因为是是注入到页面中的，所以在安全策略上不能访问大部分的API，除了下面的四种：

03

Chrome Extension

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包

03

认识Chrome扩展插件

1、前言现如今的时代，绝大多数人都要跟浏览器打交道的，说到浏览器那肯定是Chrome浏览器一家独大，具体数据请看👇 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额，主要数据如下：浏览器市场份额月涨跌份额 Chrome 66.19% -0.74% Edge 10.84% +0.2% Safari 8.94% +0.01% Firefox 8.08% +0.28% Opera 3.06% +0.08% IE 0.75% 浏览器扩展插件的用途生产力工具（和浏览器进

01

Chrome扩展开发入门体验

****前言**** Chrome浏览器扩展开发算是相当简单的，基本只要掌握HTML+CSS+Javascript，即可快速开发一个属于你的Chrome插件！ ---- ****Chrome扩展基本目录结构**** manifest.json 这是一个配置文件，里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容; icon.png 这个一看便知，就是扩展的图标～～～ popup.html 点击扩展图标，弹出的面板页面（如果在manifest.json中配置了default

04

15分钟手摸手教你写个可以操控 Chrome 的插件

友人 A: 通过后端服务或者 python 脚本通信 chrome 插件能够操作浏览器

02

进阶|Chrome还不够神，但你写的扩展程序可以很神

前端爱好者的知识盛宴 Hello,各位前端ers，周末好！今天的供稿人是鹅厂的ChokCoco... 作为前端大神... 不可避免会接触Chrome... 这是一款好用的插件会帮你提升质感... 如果你有好的Idea... 想做好的插件并发布... ChokCoco会手把手教你... 并且征服各项难点... 欢迎转发和留言... 文末会有ChokCoco的博客... 欢迎有事没事上去逛一逛... 什么是 chrome 扩展程序扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。对于前

02

一天学会Chrome插件开发

如前所述，它包含了一些插件的元数据，作为chrome的入口文件，可以理解为插件的程序清单，那么它到底做了什么事情呢？结合示例，我们细细来看：

05

用 Vue 开发自己的 Chrome 扩展

浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。

03

如何快速地开发一个chrome扩展插件

说到现如今最流行的浏览器，那么一定是chrome，无论是它的速度，还是它的稳定性，还是它的简洁，都让人爱不释手，此外，更多的人选择它的理由是它有着丰富的扩展插件，这些扩展插件让你的浏览器变得异常强大，让你的浏览器不仅仅是浏览器。

02

Chrome扩展开发入门

近几年，随着 IE 浏览器的落幕，Chrome（包括使用Chrome内核的浏览器）其实质上已经垄断整个浏览器行业了，就连微软的 Edge 都用上了 Chrome 内核。可以说，Chrome 的标准，事实上就可以看做是行业标准了。可以预见，Chrome 的发展前景将会非常广阔。

03

Chrome扩展开发

注：content_scripts段中的代码会在页面加载对应阶段"document_start", “document_end”, or "document_idle"自动注入但是脚本运行在与页面独立的上下文中，无法访问到原页面的脚本上下文资源如需访问原页面脚本上下文，可在content_scripts脚本中将web_accessible_resources段中声明的脚本注入到document中样例： js/content-script.js

02

从零实现的Chrome扩展

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

02

【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

关于 chrome 扩展的文章，很久之前也写过一篇。清除页面广告？身为前端，自己做一款简易的chrome扩展吧。本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。什么是 chrome 扩展

03

【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

关于 chrome 扩展的文章，很久之前也写过一篇。清除页面广告？身为前端，自己做一款简易的chrome扩展吧。本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。什么是 chrome 扩展

03

【干货】Chrome插件(扩展)开发全攻略

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

04

Chrome插件开发教程

了解浏览器器插件，这里专指 Chrome Extension（CE）的基本知识和运行原理

01

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

谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。

01

Chrome扩展插件的开发--获取网页Cookies

Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。那么有没有想自己开发一款自己的谷歌浏览器插件呢？本文将介绍大家手动开发一个谷歌浏览器插件获取cookies.

02

Chrome扩展插件的开发--获取网页Cookies

Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。那么有没有想自己开发一款自己的谷歌浏览器插件呢？本文将介绍大家手动开发一个谷歌浏览器插件获取cookies.

02

Chrome插件开发

你只需要看完上面那篇文章和掌握一些前端开发基础，就足以自行编写一个 Chrome 插件。本文也是基于上面文章加上自己之前写的插件所记。

02

清除页面广告？身为前端，自己做一款简易的chrome扩展吧

大家肯定有这样的经历，浏览网页的时候，左右两端广告，诸如“屠龙宝刀，点击就送”，以及最近火的不行的林子聪37传奇霸业什么“霸业面具，霸业吊坠”的魔性广告总是充斥我们的眼球。当然有现成的扩展程序或者插件（两者概念稍有不同）可以清除页面广告，但是既然身为一名程序猿，尤其是FEDer，为什么不尝试一下自己写一个清除广告的扩展程序呢。其实，编写一个浏览器扩展程序十分简单，尤其是chrome扩展，可以完全使用前端技术（HTML/CSS/JS）完成一个自己编写的扩展程序。让我们一步一步，学习一下如何编写一个简单的清除

05

设计和实现一个 Chrome 插件提升登录效率

在我们的工作过程中，每当需要排查问题、跑冒烟用例、看测试环境的效果时，经常需要在浏览器环境中切换登录账号，另外，在开发的过程中，也需要在编辑器 VS Code 里切换代理登录的账号。

01

带你快速走进Chrome扩展开发的大门

Chrome 扩展程序通过可以向 Chrome 浏览器添加特性和功能来增强浏览体验，可以构建一些强大的生产力工具，也可以丰富网页的内容，还可以做一些信息的聚合等等。本篇文章将带你通过三个简单的案例带你快速走进Chrome扩展开发的大门。

01

chrome插件 DIY

本文作者：IMWeb coolriver 原文出处：IMWeb社区未经同意，禁止转载 1 前言对于一个web前端开发者，chrome浏览器是一个工作，学习和生活的必备工具。除了chrom

06

chrome插件 DIY

对于一个web前端开发者，chrome浏览器是一个工作，学习和生活的必备工具。除了chrome本身的基本能力（控制台等）外，能大幅提高这个神器的使用体验的是，可扩展能力（插件）以及丰富的插件生态。

02

小技巧 | Get 到一个 Web 自动化方案，绝了！

无论是 Chrome，还是 Firefox 浏览器，它们的强大性在很大程度上都是依赖于海量的插件，让我们能高效办公

02

从 0 开始入门 Chrome Ext 安全（一） -- 了解一个 Chrome Ext

在2019年初，微软正式选择了Chromium作为默认浏览器，并放弃edge的发展。并在19年4月8日，Edge正式放出了基于Chromium开发的Edge Dev浏览器，并提供了兼容Chrome Ext的配套插件管理。再加上国内的大小国产浏览器大多都是基于Chromium开发的，Chrome的插件体系越来越影响着广大的人群。

01

从0开始入门Chrome Ext安全（一） -- 了解一个Chrome Ext

在2019年初，微软正式选择了Chromium作为默认浏览器，并放弃edge的发展。并在19年4月8日，Edge正式放出了基于Chromium开发的Edge Dev浏览器，并提供了兼容Chrome Ext的配套插件管理。再加上国内的大小国产浏览器大多都是基于Chromium开发的，Chrome的插件体系越来越影响着广大的人群。

01

小技巧 | Get 到一个 Web 自动化方案，绝了！

无论是 Chrome，还是 Firefox 浏览器，它们的强大性在很大程度上都是依赖于海量的插件，让我们能高效办公

00

【Chrome】931- 何从零开始开发一个 Chrome 插件？

简单来说浏览器插件，是浏览器上的一种工具，可以提供一些浏览器没有的功能，帮你做一些有趣的事情。开发者可以根据自己的喜欢，去实现一些功能。插件基于Web技术（html、css、js）构建。

06

chrome插件开发入门

chrome浏览器深受广大用户的喜爱，其扩展性对于开发者来说更加是经常会接触到的，平时用到很多的插件，一方面帮助自己提高了工作的效率，本小节来学习一下chrome插件开发入门篇

02

Chrome扩展程序之编码&时间戳小工具

Chrome扩展程序之编码&时间戳小工具作为一个前端小白，对于chrome扩展程序久闻大名，实际动手头一次；前天晚上到前端哪里串门看到小伙伴在搞这个，要了份手册，也来尝个鲜项目源码看这里: https://git.oschina.net/liuyueyi/encoder 需求作为一个web后端，经常需要干的事情，url参数编码，时间戳和日期的互转，unicode编码转码，每次要用的时候都low b的到百度上找个工具来用，虽然说也可以满足需求，单终究不是那么爽快；作为一个码农，完全可以考虑捋起袖子

08

chrome扩展开发中文教程-1

在这一节中，将编写一个browser action扩展，这个扩展会在谷歌浏览器的工具栏上增加一个图标。

04

在半小时内从无到有开发并调试一款Chrome扩展（Chrome插件/谷歌浏览器插件）

就在不久之前，我们目前这个毕业班的班长那日同学和我说，他正在公司开发Chrome扩展，看起来很高大上的技术，实际开发却非常简单，这引起了我非常浓厚的兴趣，正所谓技不压身，检验自身技术的手段之一就是拥抱新事物，这一次我们尝试在半小时内开发一款Chrome扩展，因为之前我们做了一个微信小程序的在线面试题题库的项目，所以正好利用这个题库将面试题平移到Chrome扩展上面。

02

从油猴脚本管理器的角度审视Chrome扩展

在之前一段时间，我需要借助Chrome扩展来完成一个需求，当时还在使用油猴脚本与浏览器扩展之间调研了一波，而此时恰好我又有一些做的还可以的油猴脚本 TKScript (点个star吧 😁)，相对会比较熟悉脚本管理器的能力，预估是不太能完成需求的，所以趁着这个机会，我又学习了一波浏览器扩展的能力。那么在后来需求的开发过程中，因为有些能力是类似于脚本管理器提供的基础环境，致使我越来越好奇脚本管理器是怎么实现的，而实际上脚本管理器实际上还是一个浏览器扩展，浏览器也并没有给脚本管理器开后门来实现相关能力，而让我疑惑的三个问题是:

01

如何用浏览器看雪？Chrome扩展开发

朋友圈都在晒下雪，今天，MixLab 教大家如何在屏幕上看雪。使用 chrome 的扩展，注入下雪的代码到任意网页，如下图：如何实现的？ chrome 扩展主要的文件是 manifest.jso

07

AI助力 0 编程基础小白开发谷歌截图插件

根据 GPT 返回，先创建一个 Google ScreenShot Extension 的文件夹，然后创建三个文件，分别是：manifest.json、popup.html、popup.js。

01

AI助力 0 编程基础小白开发谷歌截图插件

根据 GPT 返回，先创建一个 Google ScreenShot Extension 的文件夹，然后创建三个文件，分别是：manifest.json、popup.html、popup.js。

01

WebSth 指纹识别插件简要分析

今天才在某个论坛上看到这个网站：http://websth.com/，深感所知甚晚啊，自己一直想做的web指纹识别，已经有童鞋做成chrome插件发布了，并且功能还算比较强大，不过准确性确实有待提高。于是我下载了其源码并开始围观一下。

05

关于chrome插件编写的小结

其中manifest文件最为重要，它定义/指明插件应用的相关信息（权限、版本、功能说明等），点此查看Manifest的详情>>

03

绕过 CSP 从而产生 UXSS 漏洞

当通过 tarnish 扫描大量 Chrome 扩展程序时，我发现了两款流行的 Chrome 扩展程序 Video Downloader for Chrome version 5.0.012 (820万用户) 和 Video Downloader Plus(730 万用户) 在浏览器的操作页中存在 XSS 漏洞，而利用这些扩展程序只要让受害者导航到攻击者控制的页面。

02

你不可不知的腾讯混元大模型前端开发实战技巧

大家好，我是喵喵侠，是一名前端开发。在日常开发的过程中，我经常会遇到各种问题，以往最常见的解决方式是借助搜索引擎，来寻找问题的解决办法。这种方式虽然大部分情况下能解决问题，但搜索和筛选还是需要花费不少精力的，搜索关键词不对，还得反复尝试。现在有腾讯混元大模型就方便多了，你能够通过自然语言描述，向大模型表达你的问题和需求，随后等待片刻，就能得到你想要的答案，这样就节省了大量搜索的时间，十分方便。我会在本篇文章中，先为大家介绍腾讯混元大模型的能力，然后按照我的平日的使用习惯，分享我之前的提问案例，最后会带来一个完整的开发实战小项目，相信看完本文的你一定会有所收获。

02

写废了一个浏览器插件

高中的时候背过三十功名尘与土，八千里路云和月以及莫等闲，白了少年头，空悲切这两句，都是只知其句，不知其意。现在重读这首诗，只能用其中的一个词形容------壮怀激烈。

01

vue.js 初体验：Chrome 插件开发实录

背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引

05

数栈技术干货：从0到1实现谷歌插件开发探索及应用

数栈是云原生—站式数据中台PaaS，我们在github和gitee上有一个有趣的开源项目：FlinkX，记得给我们点个star！star！star！

02

chrome extension develop

打开extension调试模式，加载文件目录，在chrome extension按钮出现后，右键inspect popup，添加调试断点，F5进入断点

01

vuejs初体验-Chrome插件开发实录

背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引入，这样不是太好。需求就出现了，能不能有一个工具可以直接预览Animate.css对应的动画效果，并且生成对应的动画代码呢？作为一个UI开发，平时跟Chrome浏览器打交道最多，于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码，这样在实际开发中碰到一些需要

02

30分钟开发一款抓取网站图片资源的浏览器插件

由于业务需求, 笔者要为公司开发几款实用的浏览器插件,所以大致花了一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验, 并通过一个实际案例来复盘插件开发的流程和注意事项.

01

【JavaScript 理论知识】VUE.JS之初体验：Animate.css封装！

对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。 image.png 前言对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引入，这样不是太好。需求就出现了，能不能有一个工具可以直接预览Animate.css对应的动画效果，并且生成对应的动画代码呢？作为一个UI开发，平时跟Ch

07

从0开始开发一个chrome插件(1)-manifest_version为3

backgroud 是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭