kaizi1992

浏览: 55216 次

博主相关

博客

微博

相册

文章分类

社区版块

( 0)
( 0)
( 0)

存档分类

2022-11 ( 1)
2022-10 ( 4)
2021-06 ( 3)

chrome扩展插件的开发--获取网页cookies

博客分类：

凯哥java

chrome扩展插件的开发--获取网页cookies

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

chrome扩展插件的开发-买球官网平台

· manifest.json

开发插件必须提供该文件，用来配置插件所有的必要信息，比如插件名字、描述、版本号、图标等；

· 插件弹窗popup

点击插件图标会弹出一个窗体，这个窗体就是 popup 。在 manifest.json 的 action 字段配置 popup，其中 default_popup 指定点击 popup 后显示的 html 内容，路径位置相对于配置文件，另外default_icon设置的是扩展插件图片，路径位置相对于配置文件；

// manifest.json继续配置action

{

...

"action": {

"default_popup": "popup.html",

"default_icon": "hello_extensions.png"

}

// popup.html

· 权限配置

获取cookies需要先在manifes.json中添加对应权限；中设置哪些网站下该插件可以获取 permissions 里列举的权限；

...

    "host_permissions": [

        "http://*/*",

        "https://*/*"

],

    "permissions": [

        "cookies",

        "tabs"

· popup.js

在开发插件时，不能将 js 代码直接写在 html 文件里，否则会报错，必须要单独新建一个 js 文件，然后通过 script 标签引用该文件；通过在popup.js内调用chrome获取cookies的api来获取所访问网页的cookies，并把结果展示到popup.html弹窗内部；

const $container = document.getelementbyid('container')

// domcontentloaded 监听当前页面的html加载完成

document.addeventlistener('domcontentloaded', () => {

    // chrome.tabs 读取浏览器已打开的tab页签，其中'active': true访问到的是当前所处的标签页

    // window_id_current 当前标签页id

    chrome.tabs.query({ 'active': true, 'windowid': chrome.windows.window_id_current },

        function (tabs) {

            console.log('什么是tabs===',chrome, tabs)

            const url = new

            chrome.cookies.getall({

                domain: url.host

            }, (cookies) => {

                cookies.map((c) => {

                    const divele = document.createelement("div")

                    const keyele = document.createelement("span")

                    keyele.setattribute('class', 'cookiesname')

                    const valueele = document.createelement("span")

                    valueele.setattribute('class', 'cookiesvalue')

                    keyele.innerhtml = c.name   ": "

                    valueele.innerhtml = c.value

                    divele.appendchild(keyele).appendchild(valueele)

                    $container.appendchild(divele)

})

})

);

})

· 打开chrome的插件管理页面chrome://extensions

· 打开该页面右上角的开发者模式

· 点击加载已解压的扩展程序，上传本地文件即可导入插件

· 点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部

分享到：

2022-10-30 10:49
浏览 26
评论(0)
分类:编程语言

发表评论

您还没有登录,请您登录后再发表评论

最近访客

博主相关

文章分类

社区版块

存档分类

最新评论

chrome扩展插件的开发--获取网页cookies

chrome扩展插件的开发-买球官网平台

· manifest.json

· 插件弹窗popup

· 权限配置

· popup.js

评论

发表评论

相关推荐

最近访客

博主相关

文章分类

社区版块

存档分类

最新评论

chrome扩展插件的开发--获取网页cookies

chrome扩展插件的开发-买球官网平台

· manifest.json

· 插件弹窗popup

· 权限配置

· popup.js

评论

发表评论

相关推荐

【经验】通过jvm调优，让凯哥个人博客响应速度提升了不少

【图文安装教程】在docker中安装kibana

jvm学习第一篇思考：一个java代码是怎么运行起来的-上篇

排序算法第一篇-排序算法介绍

datax是阿里开源的离线数据库同步工具的使用

网站由http升级为https图文教程

阿里云【七天深入mysql实战营】

部署在阿里云上的项目收到了阿里云发送的shiro漏洞

jvm笔记九-gc收集器日志信息学习

jvm笔记八-堆参数调优

jvm笔记五-堆区

jvm笔记二双亲委派机制

jvm学习笔记之类装载器-classloader

java面试集锦（一）

spring cloud系列教程第九篇-eureka自我保护机制

安装vsftp服务器的时候遇到的问题

spring cloud系列教程第六篇-eureka集群版

spring cloud系列教程第四篇-eureka基础知识

java多线程带返回值的callable接口

spring cloud系列教程第一篇-介绍