浏览器插件是个人化定制浏览器的重要方式之一，而前端技术的快速发展也为开发浏览器插件提供了更多的可能。本文将介绍使用 Custom Elements 和 Web Storage 来构建简单的浏览器插件的方法，让你能够快速上手开发自己的浏览器插件。
Custom Elements
Custom Elements 是 Web Components 规范中的一种，它能够让开发者定义自己的 HTML 元素，并在网页中使用。使用 Custom Elements 可以将具有复杂逻辑的组件封装为自定义元素，这样就能够像使用内置 HTML 元素一样来使用自定义元素了。
使用 Custom Elements 需要定义一个继承自 HTMLElement 的类，并在该类内部实现元素的生命周期和逻辑，例如：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- ----- - ------------------- - -- ------------- - ---------------------- - -- -------------- - ------------------------------ --------- --------- - -- ------------ - ----------------- - -- ---------------------------- - -展开代码
定义完自定义元素类之后，还需要使用 customElements.define 方法将其注册为自定义元素：
customElements.define('my-element', MyElement);
现在就可以在 HTML 中使用 <my-element> 元素了。
Web Storage
Web Storage 为浏览器提供了在客户端保存数据的能力，它包括两种类型：localStorage 和 sessionStorage。
localStorage 和 sessionStorage 的 API 完全一样，它们的区别在于：
- localStorage 的存储数据没有时间限制，而 sessionStorage 的存储数据在会话结束时被清除。
- localStorage 存储的数据可以被所有相同域名下的页面访问，而 sessionStorage 存储的数据只能被当前页面访问。
使用 Web Storage 非常简单，只需要使用 localStorage 或 sessionStorage 对象的 API 进行操作即可。例如：
localStorage.setItem('key', 'value'); localStorage.getItem('key'); // 返回 'value' localStorage.removeItem('key');
构建浏览器插件
现在我们已经掌握了使用 Custom Elements 和 Web Storage 的方法，接下来就可以开始构建浏览器插件了。
本文将构建一个简单的浏览器插件，该插件能够在页面左侧悬浮展示一个 “Hello World” 的自定义元素。同时，用户可以在插件设置页面中设置自定义元素的文本内容，该设置会被保存到 localStorage 中，在下次打开网页时仍然能够保留。
创建自定义元素
首先，我们需要创建一个继承自 HTMLElement 的自定义元素类，可以命名为 HelloWorld。在该类的构造函数中，我们需要创建一个 Shadow DOM 和一个文本节点，然后将该文本节点插入到 Shadow DOM 中。插入代码可以如下编写：
-- -------------------- ---- ------- ----- ---------- ------- ----------- - ------------- - -------- -- -- ------ --- ----- ------ - ------------------- ----- ------ --- -- ------ ----- ---- - ------------------------------ ---------------- - ------- -------- -- ------- ------ --- ------------------------- - -展开代码
使用自定义元素
接下来，我们需要在页面中使用该自定义元素。可以在页面的 body 中添加一个 <hello-world> 元素：
<body> <hello-world></hello-world> ... </body>
这样，页面左侧就会出现一个 “Hello, World!” 的自定义元素了。
添加设置页面
下一步，我们要添加一个设置页面，让用户可以设置自定义元素的文本内容。设置页面可以使用标准的 HTML 元素和 CSS 样式进行布局。
-- -------------------- ---- ------- ------ --------------------------- ---- ------------------ --------------- ------- ------ ------------------------------ ------ --------------- ------------ ------- ------------------------------ ------ ------- ------------------------------------ -------展开代码
在 JavaScript 中，我们需要添加一个点击事件监听器，使得点击设置按钮时能够显示设置页面。
const settingButton = document.getElementById('setting-button'); const settingPanel = document.getElementById('setting-panel'); settingButton.addEventListener('click', () => { settingPanel.style.display = 'block'; });
保存设置
最后，我们需要能够保存用户的设置，使得下次打开同样的网页时也能够使用用户上次的设置。
这里我们可以使用 localStorage 存储用户设置的文本内容。可以添加一个点击事件监听器，使得保存按钮能够保存用户输入的文本内容到 localStorage 中：
const saveButton = document.getElementById('save-button'); const textInput = document.getElementById('text-input'); saveButton.addEventListener('click', () => { localStorage.setItem('hello-world-text', textInput.value); settingPanel.style.display = 'none'; });
最后，我们需要在自定义元素的构造函数中读取 localStorage 中保存的文本内容，并将其设置为自定义元素的文本内容：
-- -------------------- ---- ------- ----- ---------- ------- ----------- - ------------- - -------- -- -- ------ --- ----- ------ - ------------------- ----- ------ --- -- ------ ----- ---- - ------------------------------ ---------------- - ---------------------------------------- -- ------- -------- -- ------- ------ --- ------------------------- - -展开代码
以上就是构建浏览器插件的整个过程，下面是完整的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ----- ------- -------------- ----- ---------------- ------- ------ --------------------------- ---- ------------------ --------------- ------- ------ ------------------------------ ------ --------------- ------------ ------- ------------------------------ ------ ------- ------------------------------------ -------- ----- ---------- ------- ----------- - ------------- - -------- -- -- ------ --- ----- ------ - ------------------- ----- ------ --- -- ------ ----- ---- - ------------------------------ ---------------- - ---------------------------------------- -- ------- -------- -- ------- ------ --- ------------------------- - - ------------------------------------ ------------ ----- ------------- - ------------------------------------------ ----- ------------ - ----------------------------------------- --------------------------------------- -- -- - -------------------------- - -------- --- ----- ---------- - --------------------------------------- ----- --------- - -------------------------------------- ------------------------------------ -- -- - ---------------------------------------- ----------------- -------------------------- - ------- --- --------- ------- -------展开代码
通过以上实例，我们可以看到使用 Custom Elements 和 Web Storage 能够快速地构建简单的浏览器插件。希望本文能够对读者开发自己的浏览器插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6786cbe54083a4caeefdf3bc
