浏览器插件官方demo学习（一）：基本代码、页面渲染、书签、cookie、Omnibox等

前言

参考：https://github.com/GoogleChrome/chrome-extensions-samples

官方目前只提供了几个基于v3版本的例子，其他例子都是基于v2版本的（可能是官方比较忙，没空写例子吧）。先从v3版本的例子开始学习，后面再学习v2版本的例子。

关于基础知识不会怎么介绍，比较自己也是刚开始学习。对插件一点都不熟悉的可以看一下我的其他文章。

Hello World

background.js

//添加一个插件被安装的监听
chrome.runtime.onInstalled.addListener(async () => {
    
    
    //获取插件运行时popup.html的路径
    let url = chrome.runtime.getURL("popup.html");
    //创建一个tab页
    let tab = await chrome.tabs.create({
    
     url });
    //打印当前tab页的id
    console.log(`Created tab ${
      
      tab.id}`);
}
);

当插件第一次安装后（或者重新加载时），插件会自动创建一个tab标签页，内容就是插件的主页面

Page Redder

页面更新

background.js

function reddenPage() {
    
    
  document.body.style.backgroundColor = 'red';
}

chrome.action.onClicked.addListener((tab) => {
    
    
  if(!tab.url.includes("chrome://")) {
    
    
    chrome.scripting.executeScript({
    
    
      target: {
    
     tabId: tab.id },
      function: reddenPage
    });
  }
});

当点击扩展按钮后，如果当前页面是正常的页面，那么通过脚本注入的方式，将页面的背景颜色变成红色。

遇到的问题：
1、必须在manifest.json 中添加响应的权限

"permissions": [
  "activeTab",
  "scripting"
],

2、如果在manifest.json中的action属性中设置了页面，那么点击图标时只会打开扩展的主页面，为了避免不生效，上面的代码也可以写在主页面对应的js文件里

扫描二维码关注公众号，回复： 14564458 查看本文章

  $("#runder").click((e) => {
    
    
    //先获取tab的id
    chrome.tabs.query({
    
     active: true, currentWindow: true }, function (tabs) {
    
    
      let tabId = tabs.length ? tabs[0].id : null;
      chrome.scripting.executeScript({
    
    
        target: {
    
     tabId: tabId },
        function: () => {
    
    
          document.body.style.backgroundColor = "red";
        },
      });
    });
  });

My Bookmarks

官方demo效果：

这里就简单说一下用到的api，官方用到了jq的弹窗，这里就不介绍了。

官方demo将逻辑写在了主页面的js里，这样方便后续的操作。如果写在background.js里还需要涉及到通信，有些复杂。

获取书签

$("#bookmark").click((e) => {
    
    
  //获取书签
  chrome.bookmarks.getTree(function (bookmarkTreeNodes) {
    
    
    $("#content").append(JSON.stringify(bookmarkTreeNodes));
  });
});

将返回结果转成json看了一下是标准的树形结构，可以借助一些插件来进行展示

创建书签

chrome.bookmarks.create({
    
    
   parentId: parentId, // parentId 父级id，根级是`0`
   title: title,  //  title书签标题或文件夹名称
   url: url,   // url书签的跳转链接
 },callback);  // callback，回调函数

在指定的 parentId 下创建书签或文件夹。如果 url 为 NULL 或缺失，它将是一个文件夹。

删除书签

删除书签或文件夹

chrome.bookmarks.remove(
  id: string, // id
  callback?: function,  //回调函数
)

编辑书签

编辑书签或文件夹

chrome.bookmarks.update(
  id: string,  //要修改的标签（文件夹）对应的id
  changes: {
    
    
     title:string, //要修改的标题
     url:string   //要修改的url
  },
  callback?: function,  //回调函数
)

changes里面的树形是可选的，可以只修改其中一个，也可以两个都修改

查询书签

搜索与给定查询匹配的 BookmarkTreeNodes。使用对象指定的查询会生成匹配所有指定属性的 BookmarkTreeNode。

chrome.bookmarks.search(
  query: string | object, // 与书签 URL 和标题匹配的一串单词和带引号的短语，或一个对象。如果是一个对象，则可以指定属性query,url, 和title，并且将生成匹配所有指定属性的书签。
  callback?: function,
)

其他

• 如果要使用书签的话，需要在manifest.json中声明权限
• 关于其他方法和事件，可以自行去官网查看

Chromium Milestones

Chromium Milestones 没太看明白这是干什么用的，看插件的描述是：

显示合并了给定代码审查的Chromium发布里程碑

这个不学习

Cookie Clearer

清除cookie，主要讲了获取当前网站的域名，清除该域名下的cookie

声明
需要在manifest.json 里声明权限和主机权限

"permissions": ["cookies"],
"host_permissions": ["<all_urls>"],

获取当前域名

 $("#domain").click((e) => {
    
    
     chrome.tabs.query({
    
     active: true, currentWindow: true }, function (tabs) {
    
    
         let tabUrl = tabs.length ? tabs[0].url : null;
         if (tabUrl) {
    
    
             let hostname = new URL(tabUrl).hostname
             $("#content").html(`域名是：${
      
      hostname}，<br />网址是：${
      
      tabUrl}`);
         } else {
    
    
             $("#content").html("域名不存在");
         }
     });
 });

chrome.cookies.getAll
从单个 cookie 存储中检索与给定信息匹配的所有 cookie。返回的 cookie 将被排序，路径最长的 cookie 排在最前面。如果多个cookies的路径长度相同，则创建时间最早的cookies优先。

chrome.cookies.getAll(
  details: object,
  callback?: function,
)

details是个对象，里面是可选参数，案例中使用的是 domain ，将网站的域名作为参数，获取该域名下存储的所有cookie

demo：

//获取cookie
$('#cookie').click(async e => {
    
    
    const cookies = await getCookies('www.runoob.com')  //这里直接写死域名

    if (cookies.length == 0) {
    
    
        $("#content").html("cookie不存在");
    } else {
    
    
        // let str = ''
        // cookies.forEach(item => {
    
    
        //     str += `${item} <br />`
        // })
        $('#content').html(JSON.stringify(cookies))
    }
})

async function getCookies(domain) {
    
    
    try {
    
    
        const cookies = await chrome.cookies.getAll({
    
     domain });
        if (cookies.length === 0) {
    
    
            return [];
        }
        return cookies
    } catch (error) {
    
    
        return `Unexpected error: ${
      
      error.message}`;
    }
}

这里遇到了挺多的问题：
问题1：忘记声cookie权限和主机权限了，这个纯属马虎
问题2：最开始一直返回空，通过debugger（可以打断点，当打开插件主页面的控制台后可以进行查看）和百度最后发现，这是个异步的，加上async 和 await 最后成功拿到数据。

chrome.cookies.remove

按名称删除 cookie。

chrome.cookies.remove({
    
    
    url: cookieUrl,
    name: cookie.name,
    storeId: cookie.storeId,
  });

const protocol = cookie.secure ? "https:" : "http:";
const cookieUrl = `${
      
      protocol}//${
      
      cookie.domain}${
      
      cookie.path}`;

这些值都能在cookie 中获取到，可以看上图

其他
其他方法和事件略，可自行查看官方文档。

Omnibox - New Tab Search

看源代码就是Omnibox来调用谷歌搜索来搜索信息，这里完全可以将谷歌搜索换成百度搜索。Omnibox在之前的文章中介绍过了，这里不浪费时间了。

Web Accessible Resources

用了一下官方的demo，大体功能是指定哪些网站可以访问哪些资源。感觉没啥意思，就不看了，还以为是我一直想了解的如何监听页面请求，获取到页面请求的资源呢