首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

写个自己的chrome插件

) => { console.log('received user data', response); }); popup.js向content.js通信 在popup页面需要查找当前激活的tabs...// popup.js chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { chrome.tabs.sendMessage.../popup.js"> 当你打开浏览chrome://extensions/然后添加插件04-demo 在打开一个测试页面 我通过插件中的popup.js...总结 一个chrome插件基础文件manifest.json几个比较的参数,加载插件根目录必须要有个文件,且manifest_version是2版本上 popup.js与content.js交互,content.js...是独立于插件外部脚本,当匹配对应网页时,可以利用content.js控制当前网页 background.js是运行插件增强js,我们可以在这background.js控制chrome插件,或者与popup.js

1.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    Chrome扩展插件的开发--获取网页CookiesChrome浏览器在浏览器类应用软件中一直居于榜首,很多人选择Chrome浏览器不仅仅是因为它的稳定,还有它丰富的可拓展性。...本文将介绍大家手动开发一个谷歌浏览器插件获取cookies. 1.Chrome插件开发文档https://developer.chrome.com/docs/extensions/mv3/2.官网入门demoHello.../script/popup.js">权限配置获取cookies需要先在manifes.json中添加对应权限;host_permissions中设置哪些网站下该插件可以获取...host_permissions": ["http://*/*","https://*/*"],"permissions": ["cookies","tabs"]}popup.js在开发插件时,不能将...js 代码直接写在 html 文件里,否则会报错,必须要单独新建一个 js 文件,然后通过 script 标签引用该文件;通过在popup.js内调用chrome获取cookies的API来获取所访问网页的

    1.4K20

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

    Chrome扩展插件的开发--获取网页Cookies Chrome浏览器在浏览器类应用软件中一直居于榜首,很多人选择Chrome浏览器不仅仅是因为它的稳定,还有它丰富的可拓展性。.../script/popup.js"> · 权限配置 获取cookies需要先在manifes.json中添加对应权限;host_permissions中设置哪些网站下该插件可以获取...*/*",         "https://*/*"     ],     "permissions": [         "cookies",         "tabs"     ] } · popup.js...在开发插件时,不能将 js 代码直接写在 html 文件里,否则会报错,必须要单独新建一个 js 文件,然后通过 script 标签引用该文件;通过在popup.js内调用chrome获取cookies...5.相关API chrome.cookies chrome.tab

    2.1K20

    Chrome插件开发之隐藏页面图片

    这是本人第二次开发Chrome插件,本次开发主要两个目的,第一是练习Chrome插件开发时各个页面(沙盒)之间的消息传递,第二是在办公室看某些网站不想打开图片(你懂得。。。)...首先分析一下,在上一次开发Chrome插件开发之制作豆瓣电台歌词,我们主要使用pageAction和content_script,但是chrome的browser action插件最主要的background...popup.js $("input:radio[name='options']").change(function () { chrome.tabs.query({active: true...localStorage.state}); } }); 最后的一个消息传递是,弹出popup时根据用户当前显示开关,到底是隐藏还是显示图片 popup.js...插件的安装教程查看上一篇博客:Chrome插件开发之制作豆瓣电台歌词

    2.4K31

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

    无论是 Chrome,还是 Firefox 浏览器,它们的强大性在很大程度上都是依赖于海量的插件,让我们能高效办公 那我们是否可以编写一个插件,让浏览器自动化完成一些日常工作,解放双手呢?...答案是肯定的 ​本篇文章以 Chrome 插件为例,结合一个实例,聊聊 Web 端自动化的另一种方案 2....Chrome 插件 Chrome 扩展插件运行于基于 Chromium 内核的浏览器 包含:Chrome 浏览器、Microsoft Edge、360 浏览器等 一个 Chrome 扩展插件有 3 类文件组成...manifest.json js 脚本文件 图片、css 等资源文件 配置文件「 manifest.json 」用于配置扩展的名称、版本号、作者、图标 icon、弹出界面、权限、脚本路径等信息 js 脚本文件包含 popup.js...、background  和 content_scripts 其中 popup.js 用于搭配 popup.html 使用,用于点击插件图标的时候展示页面及页面逻辑控制 background 用于定义一个后台页面

    1.1K00

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

    可以通过 executeScript 或者 insertCSS 访问的网站 ], } js // background.js console.log('background.js') // popup.js...console.log('popup.js') // content-script.js console.log('content-script.js loaded') html popup <!...background.js 是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开, 随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在 background 里面 popup.js...即可 chrome-extension://${extensionID}/background.html 每次更新代码点击按钮刷新即可 为了调试方便起见我在 popup.js 中加入了以下代码 每次点击我们的插件图标即可新开一个后台页面

    1.5K20

    手摸手教你,从0到1开发一个Chrome浏览器插件

    开发 Chrome 浏览器插件(也称为扩展)是一段有趣且有成就感的过程。在本教程中,我将引导你从零开始,逐步创建一个简单的 Chrome 插件。...什么是 Chrome 插件?Chrome 插件是可以添加到 Google Chrome 浏览器中的小程序,旨在增强浏览器的功能。它们可以改变网页的外观、增加新的功能、与用户交互等。... 步骤 4:创建样式文件在同一文件夹中,创建 style.css 文件,添加如下内容:...16px; color: #333;}button { padding: 10px 15px; font-size: 14px;}步骤 5:添加 JavaScript 功能接下来,创建 popup.js...在 Chrome 中加载扩展打开 Chrome 浏览器,输入 chrome://extensions/ 并按回车。在右上角启用开发者模式。

    40211

    Chrome扩展程开发初探

    偶然间被ChatGPT提醒,觉得Chrome拓展开发是一个非常不错的方向。 Chrome拓展是扩展浏览器功能的小程序,用户可以通过Chrome Web Store下载和安装。...Chrome应用市场丰富多样,满足各种需求。 优势 在我看来,Chrome 拓展有一下几点好处: 操作简单快捷。相比较普通的Web页面,拓展可以更快直达用户,免去跳转切换的繁琐手续。... Click me 不清楚是什么版本开始...假如我们想给这个 myButton 添加一个 onClick 事件的处理方法,可以在 popup.js 中添加下面的代码: document.addEventListener('DOMContentLoaded...消息传递:与扩展的其他部分(如后台脚本 background.js、弹出页面 popup.js)进行消息传递和通信。 数据采集和分析:收集页面上的数据,进行分析或发送到后台进行处理。

    7510
    领券