乐趣区

关于chrome:记一次前端chrome插件基础实战分享会建议收藏上篇

jiezi

记一次前端 ”chrome 扩大 ” 简略易懂的实战分享会(上)

记录了我在组内的技术分享, 有同样需要的同学能够参考一下
分享全程下来工夫大概 67 分钟

一. 为啥要学这个

身为前端工程师，浏览器是咱们的主战场，而咱们岂但要会应用浏览器，还要利用浏览器，外围是学习浏览器的一些编程思维，让咱们更加厉害。
当然了看的见的益处就是咱们能够利用 chrome 的扩大技术做一些好玩的小工具陶冶情操。
本文没有大型的概念, 目标是让你最轻松, 最疾速的学会开发插件.

本文次要讲述干货次要常识，小知识点有没笼罩到的请查阅官网，如果是一个初学者了解完本篇文章也具备了开发的能力。

二. 什么样的 ’ 文件 ’ 算 chrome 扩大

没学习相干常识之前，认为须要是某些特定后缀的文件才是扩大程序相似我之前分享过的 vscode 插件 vscode 插件开发，而 chrome 的扩大只须要一个 json 入口文件即可，当然如果你要发到 chrome 商店的话还是须要打包一下的。
而这次要的入口文件就是 manifest.json 名字必须叫这个。
如下内容:

{
  "manifest_version": 2, // 应用的哪个版本的规定开发扩大
  "name": "谷歌扩大", // 这个是要显示在插件页面的
  "description": "用于分享常识", // 插件的介绍
  "version": "1.0", // 这个版本号会显示在插件上面, 所以不是轻易填写的
  "browser_action": {"default_icon": "images/qian.png" // 默认显示的图片}
}

“manifest_version” 应用 1 的话会报错, 所以当初都用 2 了.

为寄存相干图片, 咱们建设图片文件夹

是不是不太置信, 这就实现了一个最最根本的 ’ 插件 ’

关上开发者模式

在管制页面导入这个插件

导入咱们开发的相干文件夹, 也就是 manifest.json 寄存的文件夹

插件曾经失效了, 咱们把他放到里面便于应用, 如图步骤:

当初咱们就取得了属于咱们本人的谷歌插件

三. 更新插件

这里更新单拿出来说, 是为了不便汇总, 看到前面大家也能够来这里查, 当然上面也会反复说相干操作

  1. 更新插件, 请点击 2, 点击1 也能够做到更新, 然而他是更新全副, 哪怕只有一个扩大他也会联网申请更新, 节约半分钟的工夫, 只有在电脑断网的状况下才会立即更新本地插件, 所以你懂他的更新机制了吧, 所以开发时候举荐选用 2 的办法更新插件.
  2. devtools: 须要 f12 敞开控制台, 再 f12 关上控制台才能够更新, 并且不能够是 chrome://extensions/, 须要抉择一个无效的 网址.
  3. background: 每次更新插件或者重开浏览器才刷新, 敞开某个页面是不会刷新的.
  4. popup: 每次点击都是从新加载 popup 程序

四. background 的概念和玩法

咱们插件跑在用户的浏览器上, 那么它当然也会存在一个背地运行的后盾控制系统, 要不然怎么操控这个插件?
而这个控制系统就是 background, 咱们在manifest.json 外面加上一条

  "background":
    {"page": "background/background.html" // 指向咱们的后盾零碎},

咱们新增一个 background 文件夹, 外面就来编写咱们的后盾零碎吧

留神这里能够是 “background/background.html” 也能够是 ”background/background.js”, 差异就是后盾治理页面有无 dom 构造的存在, 上面有例子.

如果你指向的是一个 js 文件, 那么零碎会给咱们一个默认的空的 html 文件引入 js 文件作为后盾.

咱们更新扩大, 就会发现扩大上面呈现了 查看视图

点击后你回发现他只是个控制台, 并没有什么理论的操作, 而且也没有相应的视图页面, 然而咱们有 console 就能够开始游玩了, 因为局部组件外面的 console 都是当初这里的.

五. 显示图标的玩法

悬浮显示文字

在 manifest.json 外面 "browser_action" 加上这句配置
"default_title": "悬停会显示我",

这就能够为用户阐明你这个图标示意的是什么用处了

显示文字

悬浮才显示那也太不直观了, 咱们间接在图标上显示出文字岂不美哉?
这是咱们调用的第一个 api, 庆贺一下吧.
background.js中

  chrome.browserAction.setBadgeText({text: '你懂'});
  chrome.browserAction.setBadgeBackgroundColor({color: 'red'});

  1. chrome 这个变量是全局自带的, 间接调用也不会出错释怀吧
  2. chrome.browserAction.setBadgeText 最大长度为4, 中文超过两个也显示不下了, 所以中文最多两个.
  3. background.js 不能够内嵌在 background.html 页面外面, 会报平安权限的谬误
悬浮的文字也能够设置, 那咱们就做一下实时更新的成果
chrome.browserAction.setBadgeText({text: '你懂'});
chrome.browserAction.setBadgeBackgroundColor({color: 'red'});


let n = 1;

setInterval(() => {chrome.browserAction.setBadgeText({ text: 'n' + ++n});
    chrome.browserAction.setTitle({title:'阐明' + ++n});
    console.log(n);
}, 1000)

而咱们的控制台, 也打印出了相应的 console, 咱们之后的开发调试同样要在这里进行了

能够设想, 比方你监控到页面有问题, 那么你能够用红色把谬误的数量显示进去, 而后悬浮显示这个报错是阐明什么, 是不是还挺不便的, 至于如何监控咱们上面会讲.

六. popup 的展现形式

也就是咱们下面学习的小图标, 点击后呈现的下拉框, 用户能够在这里进行根底的交互.

在 manifest.json 外面 "browser_action" 加上这句配置
"default_popup": "popup/index.html",

新建 popup 文件夹, index.html 文件代码为上面的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #content {
      border: 1px solid red;
      padding: 10px;
    }
  </style>
</head>
<body>
  <button id="bt"> 点击更新内容 </button>
  <div id="content"> 显示内容 </div>
  <script src="./index.js"></script>
</body>
</html>

刷新扩大咱们能够点击 icon 查看下成果, 很奇怪哦

  1. div 会独占一行, 然而他并不会撑起宽度, 咱们须要本人为最外层设置宽度.
  2. position: fixed; left: 0; top: 0; 成果是奇怪的, 他会已 popup 自身 dom 为坐标系进行定位, 所以慎用!

自定义宽高后难受多了

    body{
      width: 300px;
      height: 300px;
    }

为按钮增加点击事件

这里同样不能用内联的 js, 要用内部引入的.
index.js :

const oBt = document.getElementById('bt');
const oContent = document.getElementById('content');

oBt.addEventListener('click', ()=>{alert('点击了按钮');
  oContent.innerHTML = "我是扭转后的文字"
})


这样咱们对 popup 内的 dom 就能够操作了, 然而我想让咱们的图标上显示的文字 停下来我要怎么做那?

七. popup 与 background 的通信 -> extension

这里波及到一个概念, background 与 popup 都是独立的页面, 所以想要通信只能用零碎提供的 api 实现

chrome.extension.getBackgroundPage() 能够获取到 Background 页面的上下文的 window 属性.

第一步: 我在 background.js 外面加了实时更新 icon 文字的限度, 只有 showTime 为真才会去更新

chrome.browserAction.setBadgeText({text: '你懂'});
chrome.browserAction.setBadgeBackgroundColor({color: 'red'});

let n = 1;
var showTime = true;

setInterval(() => {if(showTime){chrome.browserAction.setBadgeText({ text: 'n' + ++n});
    chrome.browserAction.setTitle({title:'阐明' + ++n})
  }
}, 1000)

留神, 这里我用 var 定义showTime, 因为 let 不会挂在 window 上会导致拜访不到这个变量.

popup/index.js文件咱们获取到 window 对象, 并扭转 showTime 的值

const oBt = document.getElementById('bt');
const bgWindow = chrome.extension.getBackgroundPage();

oBt.addEventListener('click', ()=>{
  // 操作 background 的上下文
  bgWindow.showTime = false
  chrome.browserAction.setBadgeText({text: '霸占'});
})

扭转背景色彩更显著

oBt.addEventListener('click', ()=>{alert('点击了按钮');
  oContent.innerHTML = "我是扭转后的文字";

  // 操作 background 的上下文
  bgWindow.showTime = false
  chrome.browserAction.setBadgeBackgroundColor({color: 'blue'});
  chrome.browserAction.setBadgeText({text: '霸占'});

  // 异步申请
  ajaxGet('https://www.zhangzhaosong.com/', (res)=>{console.log('返回值', res)
  })
})

相似这种用法能不必就不必, 毕竟这种变成思维很反人类, 数据起源搞得模糊不清, 莫名其妙的谬误也会络绎不绝.

八. 让咱们发动申请

都是本地化的操作必定无奈满足咱们, 那咱们与服务端的通信就能够玩起来了
这里呈现了一个新概念 权限

  "permissions": ["http://*/*", "https://*/*"]

下面的意思是答应拜访网址的白名单, 咱们能够依据理论状况来做出调整.

popup/index.js:

function ajaxGet(url,fn) {let xhr=new XMLHttpRequest();
    xhr.open("GET",url);
    xhr.send();
    xhr.onreadystatechange=function () {if (xhr.readyState==4&&xhr.status==200) {fn(xhr.responseText);
        }
    }
}

  ajaxGet('https://www.zhangzhaosong.com/', (res)=>{console.log('返回值', res)
  })

九. 本地贮存的应用

数据不可能每次都向后盾申请, 咱们为了方便快捷也须要利用浏览器本地的贮存形式.

manifest.json 文件外面新增一条
"permissions": ["storage", "http://*/*", "https://*/*"]

了不起的chrome.storage.sync, 能够追随以后登录用户主动同步，这台电脑批改的设置会主动同步到其它电脑;

在 popup/index.js 中增加


let date = new Date();
const Y = date.getFullYear() + '-';
const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
const D = date.getDate() + ' ';

// 读取的 key 与这个 key 的默认值
chrome.storage.sync.get({time: '第一次读取'}, function(items) {console.log(items.time);
});

chrome.storage.sync.set({time: Y+M+D}, function() {console.log('保留胜利！');
});

在 popup 上点击右键, 间接开启查看
第一次读取的后果

第二次点击

这里大家应该都明确了, 用于寄存用户对咱们插件的一些根本配置.
比方在 popup 外面配置好拦挡哪些申请, 解决哪些 dom 的款式, 设置怎么的皮肤, 而后用户下次应用的时候依然会有这个设置数据.

下篇讲述: 坏插件如何注入的页面, 如何获取用户页面的 dom, 以及乏味的想法等等内容, 图片有点多所以越写越卡, 下偏见喽!

退出移动版