制作一个js的谷歌插件，插件能够实现的功能：选中网页上的文本后，点击插件图标，点击选取颜色，即可把文本标记出来，仔细观察可以看到插件右下角会显示数字，表明做了几处高亮。而且，再次浏览这一网页时，所做的高亮依旧存在！

制作一个JavaScript谷歌插件来实现这个功能需要一些步骤： 1. **创建背景脚本**： - 使用HTML、CSS和JavaScript创建一个基本的用户界面，包括一个图标按钮以及一个小的悬浮信息区域（数字计数器）。 ```html <body> <div id="colorPicker">...</div>  <button id="highlightButton">高亮</button> <div id="counter">0</div>  </body> ``` ```javascript document.getElementById('highlightButton').addEventListener('click', highlightText); ``` 2. **添加文本选择功能**： - 当用户点击插件图标时，启用浏览器的`contextmenu`事件来选择文本。 ```javascript function highlightText(e) { e.preventDefault(); const selectedText = window.getSelection().toString(); // ... } ``` 3. **颜色选择和高亮文本**： - 使用`prompt`或`input`让用户选择颜色，然后应用CSS `background-color`到选中的文本。 ```javascript let color = prompt("请选择文字颜色"); // 或者使用 input 元素 document.execCommand('hiliteColor', false, color); // 高亮选中的文本 updateCounter(); // 更新计数器 ``` 4. **保存高亮状态**： - 使用`localStorage`或`sessionStorage`来存储选区和颜色信息，当页面刷新时读取并还原高亮。 ```javascript function saveHighlightState() { localStorage.setItem('highlightedText', selectedText); localStorage.setItem('color', color); } function restoreHighlightState() { if (localStorage.getItem('highlightedText')) { const highlightedText = localStorage.getItem('highlightedText'); const savedColor = localStorage.getItem('color'); applyHighlight(highlightedText, savedColor); } } highlightButton.addEventListener('mouseup', saveHighlightState); ``` 5. **更新计数器**： - 每次高亮完成时增加计数器的值，并显示在界面上。 ```javascript function updateCounter() { const counterElement = document.getElementById('counter'); counterElement.textContent = '已做高亮：' + counter; counter++; } ``` 6. **完善细节和错误处理**： - 考虑用户体验，如提供取消高亮的功能，处理无效的颜色输入等。记得在完成后将代码打包成合适的Chrome扩展文件结构，然后通过Chrome开发者工具的"加载未打包扩展程序"选项安装。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通