五一节期间我做了一个掘金插件(浏览器插件):支持复制当前文章为 Markdown

掘金扩展插件

最近学习谷歌插件,学以致用,所以顺手就搓出来了一个插件: 支持一键将当前阅读的掘金文档复制为 Markdown

话不多说, 直接上墙:

使用本插件

按照以下步骤来即可

  1. 访问代码源码
  1. 下载代码
  2. 导入 crx 文件 或者 直接导入编译后的产物代码

3.1. 访问 chrome://extensions/ , 然后开启开发者模式

3.2 直接将 crx 拖拽到扩展程序面板即可。

备选: 导入编译后的产物代码

下载本仓库的项目, 然后进入到 apps/juejin 目录下面, 直接运行 pnpm prod

然后回得到 dist 的一个产物目录, 将产物目录导入到浏览器扩展程序页面即可(【添加已解压的扩展程序】)。

还有哪些想法可以做到插件里面来?

可以通过留言和私信的方式给作者提需求, 满足大家的需求的同时, 能够精进一下自己的技能,作者是非常乐意。

当然如果有 BUG 也可以联系作者, 掘金私信即可。

来聊聊里面用到了哪些技术

通过上面的内容, 其实可以直接访问到源码。

本插件, 主要又两部分组成。 一部分是 pupup 页面, 也就是点击插件图标, 弹出的一个小弹出层界面。 还有一个运行在后台的 service worker。

构建篇

麻雀虽小, 五脏俱全。

使用的是 webpack + antd + typescript + tailwindcss 进行构建的。

其中 service worker 是一个不同的编译体系, 所以使用了多 entry 的方式记性打包。

TypeScritp + react

使用的 babel 全家桶, 这个没有啥好说的。

shell 复制代码
pnpm add @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader -D

样式

直接使用 CSS 即可。 2023 年 CSS 迎来重大更新, 功能已经非常强大了。 无需 less 等工具了。

同时毕竟是一个简单的应用, 如果能上 tailwindcss 几乎可以说是不用写一行样式代码。

需要的依赖:

csharp 复制代码
pnpm add css-loader postcss-loader style-loader mini-css-extract-plugin -D

直接上 webpack.config.js 配置文件

javascript 复制代码
 {
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader, // 使用 MiniCssExtractPlugin.loader 代替 style-loader
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            require("postcss-preset-env")({
              // Configurations for postcss-preset-env
              stage: 3,
              features: {
                "nesting-rules": true,
              },
            }),
            require("tailwindcss"),
          ],
        },
      },
    },
  ],
  // 排除 node_modules 目录
  exclude: /node_modules/,
},

核心能力实现

最关键的是, 如何将 当前掘金的文章, 复制为 Markdown 。

先说说这个的实现逻辑:

go 复制代码
popup 页面触发事件, 复制当前文章  

--> `service worker` 接收到事件,然后通过注入脚本的方式到当前用户访问的页面

--> 获取当前用户的 dom 节点, 拿到文章的 `article.innerHtml`

--> 将 `article.innerHtml` 返还给 `service worker`

--> `service worker` 调用 `html-to-md` 这个库与一些特殊字符串处理

--> 处理完成的结果返回给 popup 页面, pupup 页面调用 `navigator.clipboard.writeText` 实现复制即刻。
相关推荐
知识分享小能手2 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one3 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲4 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell35 分钟前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830942 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮2 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel3 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip3 小时前
JavaScript事件流
前端·javascript
小菜全3 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C4 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件