我做了一个扩展，让你知道海报是否附加了 pixiv 标签

介绍

你好很高兴见到你。
最近pixiv上好像流行“标签破坏”……
我想提供一些帮助，所以我创建了一个扩展程序，让您知道帖子是否已被标记。

安装方法

它可以从各种浏览器商店下载。

功能

有两个主要功能

标记标签
根本不显示标签

目前，仅支持插图和漫画 (www.pixiv.net/artworks/*)。

如果您打开安装了此扩展的作品，标签显示将更改如下。
pixivのタグが投稿者の付けたものか分かる拡張機能を作った
复选标记表示作者添加的标签，挂锁表示已锁定标签。

您还可以从设置中限制要显示的标记。
下面是隐藏锁定标记的示例。
pixivのタグが投稿者の付けたものか分かる拡張機能を作った

当您想要缩小要显示的标签时，它还支持。
以下仅显示作者标签和锁定标签。
pixivのタグが投稿者の付けたものか分かる拡張機能を作った

使用地点

至于我

检查“免费材料”标签或“AI”标签是否真的被海报贴上了
隐藏笑话标签等。

等等

但是，在向朋友推广扩展程序时

一边说着“有趣的标签www”一边表演自己的大叔，一眼就知道了

我有印象。

雅达，大叔好可怕……

技术相关

GitHub是这里
它是麻省理工学院许可的。

使用的语言

我使用 JavaScript 进行开发。
本来没打算加太多功能，想用最简配置去，所以选择了，但老实说，我觉得很失败。
被 TypeScript 宠坏的主体不接受 JavaScript。

堵塞的地方

扩展在页面转换中不起作用

由于 pixiv 是 SPA，因此扩展功能不适用于页面转换。
因此，对于页面转换，我们监控body 并通过查看当 DOM 发生变化时 href 是否发生变化来确定页面转换。
具体来说，代码如下。
let href = window.location.href;
const body = document.body;

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (href !== window.location.href) {
      href = window.location.href;
      // Do something
    }
  });
});

const config = {
  childList: true,
  subtree: true,
};

observer.observe(body, config);
DOM 更新是继承的

这也是SPA特有的问题。
存在一个问题，如果在转换目标中找到相同的标签，该标签将被标记两次。
幸运的是，我能够通过在页面转换期间简单地删除添加的 DOM 来解决这个问题。

在最后

感谢您的阅读。
（你可以正常检查标签是否被锁定，它可能根本没有用......）

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308630809.html