文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Chrome扩展开发入门

    本篇文章主要是从开发者角度来对其进行介绍，帮助开发者对 Chrome 扩展的结构和开发方式有个大致了解，快速入门。...所以说，Chrome 扩展开发并不是什么新鲜玩意儿，只是一个挂载到 Chrome 浏览器上的一个“扩展”模块，比起微信小程序开发还简单。 这不就是网页应用吗？...3.独立应用，无需部署，可发布到 Chrome 应用商店，作为一个独立的应用供其它用户使用。...绝大多数 chrome.* api 都是异步的，如果需要拿到异步执行的结果，需要传入 `callback` 方法。 下面象征性的举个例子，来描述一下一个插件的执行和交互。...官方文档是英文版的，国内也有好心人做了中文版的翻译版API 非官方中文翻译 在了解了大致功能之后，以后在开发过程中需要用到什么功能动态去查即可。 三、安装使用 扩展的来源及安装使用的多种方式。

    4.7K30

    Chrome扩展程开发初探

    偶然间被ChatGPT提醒，觉得Chrome拓展开发是一个非常不错的方向。 Chrome拓展是扩展浏览器功能的小程序，用户可以通过Chrome Web Store下载和安装。...下面正式进入正题，如何开发 Chrome 拓展。 准备 首先你需要具备一些知识：HTML 、CSS 、 JavaScript 等。其次需要了解 Chrome 拓展开发规范和API。...Chrome 扩展的安全性设计确实不允许在 HTML 页面中直接使用 JavaScript 代码来加载或执行扩展的功能。Chrome 扩展通过内容安全性策略来限制可以在页面上执行的脚本。...开发者可以通过 Chrome 扩展来添加自定义的右键菜单选项，以提供更多的功能和交互性。...使用 chrome.contextMenus.onClicked 监听菜单项点击事件。

    1K10

    Chrome扩展开发入门体验

    ****前言**** Chrome浏览器扩展开发算是相当简单的，基本只要掌握HTML+CSS+Javascript，即可快速开发一个属于你的Chrome插件！...---- ****Chrome扩展基本目录结构**** manifest.json 这是一个配置文件，里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容; icon.png 这个一看便知...->扩展程序 注意：将开发者模式选中～～～ The first = 点击加载已解压的扩展程序，并选择扩展程序的目录 完成后会在项目的根目录生成xx.crx以及xx.pem两个文件 The second...{}); 开发一个简单Chrome扩展程序基本是没有什么大问题的！...我的体会呢，要是主要用于离线的呢，还是开发应用好点，扩展程序也不是不可以，否则数据存储方面就使用js处理即可！ ----

    1.4K40

    chrome扩展应用开发快速科普

    由于chrome官方文档中对于如何从零开发一个chrome扩展应用没有一套完整的流程，同时官方的API文档对于初学者也不是那么友好，因此本文将通过一个初学者的视角来讲解如何从零开始快速了解和开发一个chrome...本文的目标群体：已经了解或使用过chrome扩展应用，但是自己不知道如何开发一个chrome扩展应用的工程师。如果有具体的chrome扩展应用开发经验的同学，本篇文章可能太过简单，并不适合你。...本文的主要内容如下： chrome扩展应用模块功能介绍 chrome扩展应用模块开发介绍 本文的内容不包括chrome扩展应用开发时提供的各个API功能详解，有需求的同学可以自行查看官方API文档。...chrome扩展应用模块开发介绍 首先，让我们先确定我们插件需要完成的一个功能，这样我们就能够有一个目标示例来进行介绍。...background Background Pages文件 permissions 扩展应用所需权限 权限列表见此处。申请权限后，可以使用chrome对象来进行访问该权限提供的API接口。

    1.3K10

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

    什么是Chrome插件 严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发...中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？...，改为使用扩展提供的页面。...实例：创建一个devtools扩展 首先，要针对开发者工具开发插件，需要在清单文件声明如下： { // 只能指向一个HTML文件，不能是JS文件 "devtools_page": "devtools.html...文档 模糊匹配规则语法详解 第三方资料 部分中文资料，不是特别推荐： 360安全浏览器开发文档 360极速浏览器Chrome扩展开发文档 Chrome扩展开发极客系列博客

    12.9K40

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

    ​Chrome扩展插件的开发--获取网页CookiesChrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。...本文将介绍大家手动开发一个谷歌浏览器插件获取cookies. 1.Chrome插件开发文档https://developer.chrome.com/docs/extensions/mv3/2.官网入门demoHello...Extensions3.getCookiesmanifest.json开发插件必须提供该文件，用来配置插件所有的必要信息，比如插件名字、描述、版本号、图标等；插件弹窗popup点击插件图标会弹出一个窗体...js 代码直接写在 html 文件里，否则会报错，必须要单独新建一个 js 文件，然后通过 script 标签引用该文件；通过在popup.js内调用chrome获取cookies的API来获取所访问网页的...浏览器内导入使用 打开chrome的插件管理页面chrome://extensions打开该页面右上角的开发者模式点击加载已解压的扩展程序，上传本地文件即可导入插件点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部

    1.9K20

    chrome扩展开发中文教程-1

    创建并加载一个扩展 在这一节中，将编写一个browser action扩展，这个扩展会在谷歌浏览器的工具栏上增加一个图标。...1.在磁盘上创建一个目录，用来放扩展的代码和资源 2.在这个目录中，创建一个文本文件，命名为manifest.json，其内容为： { "manifest_version": 2, "name...a)点击 图标，在菜单中选择工具>扩展程序，这会打开扩展管理的页面 b)如果“开发人员模式”旁边有个“+”号，点击这个“+”号进入开发人员模式。...“+”号会变成“-”号，同时会显示更多的按钮和信息 c)点击“载入正在开发的扩展程序…”按钮，会出现一个文件选择对话框 d)在对话框中，找到扩展目录并点击“确定” 如果扩展是正确的，它的图标就会显示在地址栏右侧...增加一些代码：CSS and JavaScript code for hello_world 2.回到扩展管理页面，点击“立即更新扩展程序”按钮，这时会重新加载修改后的扩展 3.点击扩展的图标，会弹出一个气泡窗口

    79740

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

    Chrome扩展插件的开发--获取网页Cookies Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。...本文将介绍大家手动开发一个谷歌浏览器插件获取cookies. 1.Chrome插件开发文档 https://developer.chrome.com/docs/extensions/mv3/ 2.官网入门...popup 点击插件图标会弹出一个窗体，这个窗体就是 popup 。...，不能将 js 代码直接写在 html 文件里，否则会报错，必须要单独新建一个 js 文件，然后通过 script 标签引用该文件；通过在popup.js内调用chrome获取cookies的API来获取所访问网页的...浏览器内导入使用  · 打开chrome的插件管理页面chrome://extensions · 打开该页面右上角的开发者模式 · 点击加载已解压的扩展程序，上传本地文件即可导入插件 · 点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部

    2.9K20

    用 Vue 开发自己的 Chrome 扩展

    除非扩展需要用 chrome.webRequest API来阻止或修改网络请求，否则 persistent 键应设置为 false。...由于我们要从文件（而不是Chrome网上应用店）安装自己的扩展程序，因此需要使用页面右上角的切换按钮来激活开发者模式。这应该添加一个额外的菜单栏，其中包含 Load unpacked选项。...你刚刚制作了一个 Chrome 扩展程序。 覆盖 Chrome 的新标签页 为了在打开新选项卡时迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。...我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。...由于我们将使用 Chrome’s storage API 来保存这些笑话，所以可能需要添加第三个按钮来删除 storage 中的笑话。

    3.5K30

    使用 Google 浏览器 Chrome 的扩展

    Google 浏览器 Chrome 是我现在主要使用的浏览器，Chrome 更新到 2.0 之后，除了支持 Greasemonkey 之外，也开始支持扩展。...启用 Google 浏览器 Extensions 现在目前 Chrome 官方已经提供了两款 Google Chrome 的扩展： Chrome Extensions: Gmail Checker...在 Google Reader 中订阅 这个扩展能够让你非常容易和快速使用 Google Reader 订阅当前网页的 Feed。...安装 + 下载源代码 当然对于那些想自己动手写 Chrome 扩展的同学，这里有一个教程教你如何创建一个非常简单的 Chrome 扩展。...目前删除 Chrome 的扩展比较麻烦，需要手工到你的用户数据目录（user data directory ）下找到相应的扩展，然后删除它，不过 Chrome 承诺以后会更加容易删除扩展。 ----

    1.5K20

    全流程 Chrome 扩展开发之按键提示

    key-prompt 是一个基于 Extension.js 开发工具和其提供的 vue-typescript 模板开发的 Chrome 扩展程序，可以在任意网页的左下方位置显示你对当前页面的键盘操作，其实这是一个无聊的扩展程序...Popup scripts 主要用于提供用户界面，在扩展的弹出页面中运行，可以直接访问 Chrome 扩展的 API。...它们可以直接访问 Chrome 扩展的所有 API 开发 Content Scripts 部分： VueUse 组合式工具集： VueUse 是 Vue.js 开发时非常用帮助的 Vue 组合式工具集...扩展开发中主要需要维护的版本号是 manifest.json 文件中的 verison 字段，所以我通过编写一个 update-version.js 文件来实现语义化版本管理的通用做法： 如何自动获取...Extension.js 和 Vue.js 开发一个 Chrome 扩展程序。

    51210

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

    Chrome扩展开发技能要求同创建Web应用程序相同的Web技术编写，也就是作为前端程序员最为熟悉的前端开发三件套，HTML、CSS 和 JavaScript。 Chrome扩展API？...Chrome扩展可以使用浏览器提供的所有JavaScriptAPI。使用扩展程序比Web应用程序更强大的是它们对ChromeAPI的访问。 可以获得更改网站的功能和行为。...内容脚本只能使用 Chrome API 的一个子集，但可以通过与扩展服务工作者交换消息来间接访问其余部分 3 service worker 扩展服务工作者处理和监听浏览器事件。...它可以使用所有的Chrome API，但不能直接与网页内容交互；这就是内容脚本的工作 4 popup/page 扩展可以包含各种 HTML 文件，例如弹出窗口、选项页面和其他 HTML 页面。...实现选项卡的管理 通过开发chrome expansion实现在弹窗中整合已打开的掘金文章列表 案例关键词 API：Tabs API 主机权限 期望效果 配置清单文件 沿用上一个案例 创建弹窗 先配置

    1.1K10

    使用HTML，CSS和JavaScript创建Chrome扩展程序

    介绍 谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了Google Chrome浏览器，它可以帮助我同步书签，浏览器历史记录，密码管理器等等。...通过使用扩展程序，谷歌浏览器变得更加强大。 因此，今天，我们将研究如何使用HTML，CSS和JavaScript创建您的第一个Google Chrome扩展程序。...设置 要求 Chrome扩展入门的要求很少。...列表在这里： Google Chrome扩展程序（用于测试） 文本编辑器（我更喜欢VS Code，您可以根据需要使用其他编辑器） 有关HTML，CSS和JavaScript的基础知识 Chrome扩展程序...我们将为第一个Chrome扩展程序开发一个计算器应用程序。

    2.9K20

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

    扩展（Extension） 指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发。...一般在网页中用  或者 标签声明的部分，就要靠插件来渲染。 开发自己的扩展程序 OK，简单了解完什么是扩展程序后，下面我们来看看如何开发一款扩展程序。...这个界面其实就是一个 Web 页面，点开任意一个扩展页面，右键都可以看到弹出检查选项，点击这个选项，就会弹出一个开发者工具，我们就可以愉快的开始对这个页面进行查看 DOM 结构、查看网络状态、 Debug...使用 chrome.* API 消息传递，主要使用了 Chrome 浏览器的内置 chrome 对象进行。打开浏览器，试一下，chrome 对象其实包含了非常多的功能： ?...仅供开发使用 当然，有些同学无法访问谷歌商店，或者扩展程序做出来仅仅是团队内部的一种工具，供私人使用。那么可以直接在 chrome 浏览器安装安装包。

    1.9K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券