在 Chrome 中让任意页面元素脱落

2024-02-05 13:33:38

灵感来源

某天晚上浏览掘金时无意发现炸掘金的创意游戏，心中一震，想到自己以前很想做一个将页面元素分离的特效，但因为工作忙（懒）没有实践起来。现在因为疫情居家办公，时间比以前多了，可以大胆摸鱼，何乐而不为？

动手实践

说干就干，我先从熟悉 Chrome 插件开发环境开始。通过查阅相关资料，我了解到 Chrome 插件可以使用 JavaScript 和 Chrome API 来实现各种功能。

我首先创建了一个新的 Chrome 插件项目，然后在其中添加了一个名为 "detach-element.js" 的 JavaScript 文件。在这个文件中，我编写了以下代码：

// 获取当前选中的元素
const selectedElement = document.querySelector('.selected-element');

// 创建一个新的元素，并将选中的元素的内容复制到其中
const newElement = document.createElement('div');
newElement.innerHTML = selectedElement.innerHTML;

// 将新元素添加到页面中
document.body.appendChild(newElement);

// 从页面中删除选中的元素
selectedElement.parentNode.removeChild(selectedElement);

这段代码首先获取当前选中的元素，然后创建一个新的元素，并将选中的元素的内容复制到其中。接着，将新元素添加到页面中，并从页面中删除选中的元素。这样，选中的元素就会从页面中脱落下来。

实现拖动效果

为了让脱落下来的元素可以被拖动，我使用了 Chrome API 中的 "draggable" 属性。我将以下代码添加到 "detach-element.js" 文件中：

// 启用元素的拖动功能
newElement.setAttribute('draggable', true);

// 添加拖动事件监听器
newElement.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', newElement.innerHTML);
});

这段代码首先启用元素的拖动功能，然后添加一个拖动事件监听器。当元素被拖动时，拖动事件监听器会触发，并将元素的内容存储在 dataTransfer 对象中。

实现页面缩放效果

为了让脱落下来的元素可以随着页面缩放而缩放，我使用了 Chrome API 中的 "resize" 事件监听器。我将以下代码添加到 "detach-element.js" 文件中：

// 添加页面缩放事件监听器
window.addEventListener('resize', function() {
  // 调整脱落元素的大小
  newElement.style.width = newElement.offsetWidth * window.devicePixelRatio + 'px';
  newElement.style.height = newElement.offsetHeight * window.devicePixelRatio + 'px';
});