快速复制 Cookies 插件开发

第一次尝试编写浏览器插件，因为项目的原因，我需要固定页面复制cookies信息。但是每次都要打开控制台，觉得麻烦，就干脆自己动手。

因为版本的问题 manifest_version 如果为 2 会报错，所以就直接从 3 开始，开始了我的开发插件之旅

首先配置配置文件

新建文件 manifest.json 配置基本设置

{
 "name": "Cookies Copy", // 插件名字
 "description": "复制 Cookies 信息", // 描述信息
 "version": "1.0", // 版本
 "manifest_version": 3, // 插件程序版本，这个必须写，不过现在 2 版本会报错
 "action": { //  2 版本是 browser_action 插件弹窗页面
  "default_popup": "html/popup.html",
  "default_title": "Cookies Copy",
  "default_icon": { // 图标
   "16": "image/1.jpg",
   "32": "image/1.jpg",
   "48": "image/1.jpg",
   "128": "image/1.jpg"
  }
 },
 "permissions": [ // 插件赋予的权限
  "activeTab",
  "storage",
  "contextMenus",
  "webRequest",
  "cookies",
  "tabs"
 ],
 "host_permissions": ["http://*/*", "https://*/*"], // 网页权限
 "icons": {
  "16": "image/1.jpg",
  "32": "image/1.jpg",
  "48": "image/1.jpg",
  "128": "image/1.jpg"
 },
 "background": {
  "service_worker": "js/background.js" // 可以理解生命周期最长的钩子，通常把需要一直运行的、启动就运行的、全局的代码放在background里面
 },
 "options_page": "html/options.html" // 右键菜单新开页面
}

然后就是你按照自己需要开发自己的想要的功能了。比如我，我只是需要复制 Cookies 信息，那就是复制就完了，所以我的文件结构就是

核心代码其实就在 popup.js 中

let time = null

const init = () => {
  getHtml();
  setCopy()
};



const copy = (text) => {
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);
}



const getHtml = () => {
  const cookiesList = document.getElementById("cookiesList");
  const hostnm = document.getElementById("hostnm");
  const title = document.getElementById("title");
  let html = "";
  document.addEventListener("DOMContentLoaded", () => {
    chrome.tabs.query(
      { active: true, windowId: chrome.windows.WINDOW_ID_CURRENT },
      function (tabs) {
        const { origin, hostname, url, domain } = new URL(tabs[0].url);
        title.innerText = `当前页面：${hostname}`;
        chrome.cookies.getAll({ url }, (cookies) => {
          const myUrlList = cookies.filter((item) => item.domain === hostname);
          console.log(myUrlList);

          if (myUrlList.length > 0) {
            /**<button class="value" title="${value}">点击复制</button> */
            /**<div class="name" title="${value}">${name}</div> */
            myUrlList.forEach(({ name, value }) => {
              html += `<li title="${value}">${name.toUpperCase()}</li>`;
            });
          }

          cookiesList.innerHTML = html;
        });
      }
    );
  });
};


const setCopy = () => {
  const cookiesListClickAddEventListener = document.getElementById("cookiesList");

  cookiesListClickAddEventListener.addEventListener('click', (e) => {
    // console.dir(e.target);
    const textContent = e.target.textContent
    if (e.target.title)
      copy(e.target.title)

    e.target.style.color = 'greenyellow'
    e.target.innerText = '复制成功'

    time = setTimeout(() => {
      e.target.style.color = 'var(--text-color)'
      e.target.innerText = textContent
    }, 1000)
  })

};

init();

我给大家看一下效果

当然我这款工具肯定是不能发布的，完全就是适配自己的使用，总体来看，插件开发简单功能还是挺简单的，俺的一次小经历，加油！