浏览器插件开发复制粘贴插件的简单demo

php全栈小白

已于 2025-02-08 15:23:21 修改

阅读量287

点赞数 4

分类专栏：浏览器插件开发文章标签： javascript

于 2025-02-08 12:24:50 首次发布

本文链接：https://blog.youkuaiyun.com/Z_PTOPONE/article/details/145512786

版权

浏览器插件开发专栏收录该内容

1 篇文章

订阅专栏

浏览器插件开发@TOC

浏览器插件开发简单demo

最近想要复制网站页面的内容，很头疼，可以选择，但是无法复制，试过开发者模式输入启用复制来解除js禁用复制的功能，但是失败了，也尝试过直接禁用js，可惜人家网站有检测，直接无法显示，也用了别的浏览器插件，结果也不行，无奈只能自己开发了

这里我默认大家都了解过插件开发的一些理论知识了，咱们直接上demo，小的demo

1、直接上效果

1、点击获取内容
2、就出现了需要复制的东西，然后选择复制就可以了

功能实现

1、先看目录结构

我最讨厌不给看目录结构的，所以我先给大家看目录结构，方便大家了解整个项目
在这里插入图片描述
目录很简单，就四文件，代码也很简单

2.1、background.js


// 这个跟复制功能没什么关系，这个只是测试插件是否起作用的
// 但是初学者 也也可以看看，了解一下浏览器插件本地存储的api
// 定义颜色
let color = '#3aa757';
// 首次安装插件、插件更新、chrome浏览器更新时触发
chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.sync.set({ color });
    console.log('插件默认颜色为: %c #3aa757', `color: ${color}`);
});

2.2、mainfest.json

{
    "name": "myTestPlug",
    "description": "我的第一个chrome插件",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "http://*/*",
        "https://*/*",
        "<all_urls>"
    ],
    "action": {
        "default_popup": "popup.html"
    }
}

2.3、popup.html

<!DOCTYPE html>
<html lang="zh-CN">
<title>popup</title>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            width: 300px;
            height: 500px;
        }

        .copy-head {
            width: 100px;
            
            margin: 0 auto;
        }

        .color-btn {           
            margin: 10px;
            height: 50px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }

        .color-btn.current {
            box-shadow: 0 0 0 2px white,
                0 0 0 4px black;
        }
    </style>
</head>

<body>
    <!-- 获取内容 Button -->
    <div class="copy-head">
        <button id="changeColor" class="color-btn">获取内容</button>
    </div>
    <!-- 你想复制的内容会被显示在这里 -->
    <div id="divmain">

    </div>
</body>
<script src="popup.js"></script>

</html>

2.4、popup.js

这里是主要文件，简单改改，就能实现，选取那个部分，就复制哪个部分

// 获取按钮实例
let changeColor = document.getElementById('changeColor');
// 获取 复制文字的 显示区域div实例
let divCopy = document.getElementById('divmain');

// 从chrome插件的存储里读取color变量并修改按钮颜色
chrome.storage.sync.get('color', ({ color }) => {
    changeColor.style.backgroundColor = color;
});

// 复制功能
// 注册 复制按钮 点击回调函数
changeColor.addEventListener("click", async () => {
    // 调用Chrome接口取出当前标签页   这个基本是固定写法
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 调用函数  或者外部js
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: getContent,
        args: []
    }).then((s) => {

        // ****这里是调用函数  或者外部js的回调返回

        // 接收 函数返回值
        console.log(s);
        // 标题
        var title = s[0].result.title
        // 内容
        var content = s[0].result.content
        divCopy.innerHTML = content
        // copy 到剪贴板
        navigator.clipboard.writeText(content);

        // 下载
        var blob = new Blob([content], { type: 'text/plain' })
        var url = URL.createObjectURL(blob)

        var a = document.createElement('a')
        a.href = url
        a.download = title
        a.click()
        URL.revokeObjectURL(url)

    })
});

// 调用获取页面内容的函数
// 获取页面内容
function getContent() {
    // 获取标题
    var title = document.getElementsByClassName('entry-title')[0].textContent
    // 获取所有内容
    var content = document.getElementById('primary').textContent

    // 返回结果
    return {
        title,
        content
    }
    // 因为我这个是使用的固定类名来获取内容,所以不具有通用性
    // 下面这个方法可以,大家多试试
    //获取选中的内容 然后返回数据 
    // var selectedContent = window.getSelection(0).toString()
    // // 返回结果
    // return {
    //     selectedContent
    // }
}