浏览器插件 （扩展程序）

Chrome 插件是可以添加到 Google Chrome 浏览器中，旨在增强浏览器的功能。如篡改猴。

扩展程序管理地址： chrome://extensions/

需求：某个网站，隐藏一些信息， 复制dom为图片

Chrome 插件组成

• manifest.json： 插件的配置文件，定义插件的基本信息
• popup.html：用户点击插件图标时显示的界面, 右上角
• style.css：用于美化插件界面的样式表

结构：

manifest.json

主要参数

• name：插件名称
• version：插件版本
• description：插件描述
• permissions：插件需要的权限
• host_permissions：插件需要的主机权限
• content_scripts：插件需要的内容脚本
• icons：插件图标
• action：插件操作按钮
• web_accessible_resources：插件需要的资源

示例

{
  "manifest_version": 3,
  "name": "小公鸡-信息保护",
  "version": "1.0",
  "description": "小公鸡，信息保护",
  "permissions": [
    "storage", 
    "activeTab",
    "clipboardWrite",
    "clipboardRead"
  ],
  "host_permissions": [
    "https://www.baidu.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/*"],
      "css": ["styles.css"],
      "js": [
        "html2canvas.min.js",
        "content.js"
      ],
      "run_at": "document_idle"
    }
  ],
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "action": {
    "default_icon": "logo.png"
  },
  "web_accessible_resources": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "resources": ["copy.png"]
    }
  ]
}

content.js

功能：

• 添加操作按钮
• 隐藏部分信息
• 点击复制dom为图片

// 复制目标选择器
const tagSelector= '#content_left'
// 隐藏目标元素选择器
const hideSelectors = [".toplist1-tr_1MWDu"]

function enableDrag(element, direction = 'vertical') {
  let isDragging = false;
  let startX, startY, initialLeft, initialTop;

  element.addEventListener('mousedown', (e) => {
    isDragging = true;
    
    // 记录初始位置
    startX = e.clientX;
    startY = e.clientY;
    const style = window.getComputedStyle(element);
    initialLeft = parseInt(style.left, 10);
    initialTop = parseInt(style.top, 10);

    // 防止鼠标选中其他内容
    e.preventDefault();
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    // 计算偏移量
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;


    // 根据方向限制移动
    if (direction === 'horizontal') {
      element.style.left = `${initialLeft + deltaX}px`;
    } else if (direction === 'vertical') {
      let overTop = initialTop + deltaY;
      if (overTop < 0) {
        overTop = 0;
      }
      if (overTop > window.innerHeight - element.offsetHeight) {
        overTop = window.innerHeight - element.offsetHeight;
      }

      element.style.top = `${overTop}px`;


     

        chrome.storage.sync.set({ top: overTop  });


    }
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
}



function showToast(message) {
  const toast = document.createElement('div');
  toast.className = 'yb-toast';
  toast.textContent = message;
  
  

  chrome.storage.sync.get('top',function(budget = {top: 0}){

    console.log(budget);
    toast.style.top = (budget.top || 0 )+ "px";

    console.log('top------')
    console.log(budget.top);

    document.body.appendChild(toast);
  })

  
  // 3秒后自动移除
  setTimeout(() => {
    toast.remove();
  }, 3000);
}

window.onload = function() {
 

    const hint_right_top = document.querySelector("body");


    const domImg = document.createElement("img")
    domImg.src = chrome.runtime.getURL("copy.png");
    domImg.classList.add("yb-btn-img")

    const domNow = document.createElement("div")

    domNow.appendChild(domImg);
    domNow.classList.add("yb-btn")
    // domNow.innerHTML = "复制";
    
    enableDrag(domNow);




    chrome.storage.sync.get('top',function(budget = {top: 0}){

      console.log(budget);
      domNow.style.top = (budget.top || 0 )+ "px";
      hint_right_top.appendChild(domNow);
    })





    const parseBase64 = (base64) => {
      let re = new RegExp('data:(?<type>.*?);base64,(?<data>.*)')
      let res = re.exec(base64)
      if (res) {
        return {
          type: res.groups.type,
          ext: res.groups.type.split('/').slice(-1)[0],
          data: res.groups.data,
        }
      }
    }


    const copyImg = (imgUrl) => {
      const parsedBase64 = parseBase64(imgUrl)
      let type = parsedBase64.type
      // 将base64转为Blob类型
      let bytes = atob(parsedBase64.data)
      let ab = new ArrayBuffer(bytes.length)
      let ua = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ua[i] = bytes.charCodeAt(i)
      }
      let blob = new Blob([ab], { type })
      navigator.clipboard.write([new ClipboardItem({ [type]: blob })])

      showToast("复制成功");
 
    }
   


    async function captureNative() {
      const target = document.querySelector(tagSelector);

      html2canvas(target).then(canvas => {
        const imgUrl = canvas.toDataURL('image/png');
        if (window.location.protocol == "http:") {
          // http环境下无法直接复制图片，需手动复制
        } else {
          copyImg(imgUrl);
        }
      })
    }

    (function () {
      hideSelectors.forEach(selector => {
        const elements = document.querySelectorAll(selector);
        elements.forEach(element => {
          element.style.display = "none";
        });
      })
    })()

    domImg.onclick = function() {

      captureNative();
    }
};

项目地址

• 地址 https://gitee.com/coolo/hidden.git

• 示例