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

原创

已于 2025-02-08 15:23:21 修改 · 327 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

浏览器插件开发@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",