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

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

1.Chrome插件开发文档

https://developer.chrome.com/docs/extensions/mv3/

2.官网入门demo

Hello Extensions

3.getCookies

·       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
<html>
<head>
  <style>
    #container {
      width: 200px;
      word-break: break-all;
    }
  </style>
</head>
<body>
<div id="container"></div>
<script src="./script/popup.js"></script>
</body>
</html>
 
 

·       权限配置

获取cookies需要先在manifes.json中添加对应权限；host_permissions中设置哪些网站下该插件可以获取 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 URL(tabs[0].url)
            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)
                })
            })
        }
    );
})

4.插件在chrome浏览器内导入使用

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

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

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

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

5.相关API

chrome.cookies

chrome.tab

Chrome扩展插件的开发--获取网页Cookies的更多相关文章

  1. Chrome扩展之css used 获取网页样式

    地址栏输入: chrome://extensions/ 然后获取更多扩展程序,得到css used 复制html节点 最后点击 "css used" 把样式全部复制下来即可 (记住 ...

  2. Chrome扩展及应用开发

    Chrome扩展及应用开发(电子书) http://www.ituring.com.cn/minibook/950 文档 官方 https://developer.chrome.com/extensi ...

  3. 认识Chrome扩展插件

    1.前言 现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome浏览器一家独大,具体数据请看 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主 ...

  4. 手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  5. 自制Chrome扩展插件：用于重定向js

    前言 作为一个前端开发, 在调试生产环境的代码时,是否苦于生产环境代码被压缩,没有sourcemap? 有没有想过将生产环境的js直接重定向为本地开发环境的js? 玩微前端时,有没有想过用本地的子应用 ...

  6. BlazeMeter发布chrome扩展插件，支持JMeter脚本创建

    BlazeMeter发布chrome扩展插件,支持JMeter脚本创建http://www.automationqa.com/forum.php?mod=viewthread&tid=3898 ...

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

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

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

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

  9. 那些离不开的 Chrome 扩展插件

    虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tamperm ...

  10. Chrome扩展插件流程

    一.浏览器插件基础步骤: 1.文件最基础的配置 : 一个manifest文件.一个或多个html文件.可选的一个或多个javascript文件.可选的任何需要的其他文件,例如图片:在开发应用(扩展)时 ...

随机推荐

  1. 使用jsp+servlet+mysql用户管理系统之用户注册-----------使用简单三层结构分析页面显示层（view），业务逻辑层（service），数据持久层（dao）

    View层:jsp+servlet: jsp: <%@ page language="java" contentType="text/html; charset=U ...

  2. 量子算法抛转（以及Oracle函数初步）

    接下来要接触量子算法了,我们会看到怎么利用量子并行机制和干涉原理.干涉在算法对结果进行测量求值时举足轻重. Deutsch-Jozsa 算法 DJ算法是量子算法的入门算法,就像编程界的"He ...

  3. 韦东山freeRTOS系列教程之【第三章】任务管理

    目录 系列教程总目录 概述 3.1 基本概念 3.2 任务创建与删除 3.2.1 什么是任务 3.2.2 创建任务 3.2.3 示例1: 创建任务 3.2.4 示例2: 使用任务参数 3.2.5 任务 ...

  4. win10 gvim

    前言 现有的vscode太过于繁重,notepad++也不理想,顿来心思,想在win10配置一个gvim环境. 正文 安装gvim,从releases中找一个x64的.exe下载安装即可,安装完毕,把 ...

  5. Linux启动Java程序jar包Shell脚本

    手动方式启动和终止java程序 启动java程序jar:nohup java -jar XXX.jar 查看程序占用pid:ps -ef | grep XXX.jar 或 jps jps是jdk提供的 ...

  6. Dotnet算法与数据结构：Hashset, List对比

    哈希集A 是存储唯一元素的集合.它通过在内部使用哈希表来实现这一点,该哈希表为基本操作(如添加.删除和包含)提供恒定时间平均复杂度 (O(1)).此外,不允许重复元素,使其成为唯一性至关重要的场景的理 ...

  7. C++11标准库<chrono><future> <atomic><condition_variable><mutex><thread>梳理 (5万字)

    <chrono> C++11中提供了日期和时间相关的库chrono. chrono库主要包含三种类型的类:时间间隔duration.时钟clocks.时间点time point. 时间间隔 ...

  8. [oeasy]python0083_[趣味拓展]字体样式_正常_加亮_变暗_控制序列

    字体样式 回忆上次内容 上次了解了 一个新的转义模式 \033 逃逸控制字符 esc   esc 让输出 退出 标准输出流 进行 控制信息的设置 可以 清屏 也可以 设置光标输出的位置     还能做 ...

  9. TIER 1: Three

    TIER 1: Three 信息收集 通过以前的练习,我们首先确认目标 IP 开放了哪些端口,比如使用 nmap 之类的工具进行扫描.本次靶机开放: 22 端口:SSH, OpenSSH 80 端口: ...

  10. 【云服务器】记录使用腾讯云服务器搭建个人blog网站-【1】服务器配置

    服务器购买 第一次写博客,写的不好请见谅 腾讯云教育活动 配置还行,能搭建个网站了果断下单 选择系统 缺点(对我来说):参考于:人生不开窍:Windows Server各版本差异 不能安装window ...