时间戳

首页 > 解决方案 > 如何在悬停的 div 周围添加边框，最好在单击扩展弹出窗口上的按钮后激活该功能？

javascript - 如何在悬停的 div 周围添加边框，最好在单击扩展弹出窗口上的按钮后激活该功能？

问题描述

我想为用户提供将鼠标悬停在页面上的 div 上并在悬停的 div 周围临时出现边框的可能性

我实际上正在为所有 div 添加样式，但这并不理想

div:hover {
    outline: 1px solid blue;
}

当用户单击弹出窗口上的按钮时，最好激活此模式，如下图所示 将鼠标悬停在显示边框的 div 上 将鼠标悬停在显示边框的 div 上

标签： javascripthtmlcssgoogle-chrome-extension

解决方案

经过一些研究，我发现这个问题是关于类似情况的。

对于此问题，示例如下所示（改编自链接问题）：

popup.js（在您的弹出窗口中链接）：

document.getElementById('yourButton').addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(activeTabs) {
        chrome.tabs.sendMessage(activeTabs[0].id, { action: 'injectCSS' });
    });
});

然后您可以content.js通过应用程序的清单文件将一个包含到每个（或您喜欢的）站点中：

"content_scripts": [
    {
      "matches": ["https://airbnb.com/*"],    //or "matches": ["<all_urls>"]
      "js": ["js/content.js"]
    }
]

内容.js：

chrome.runtime.onMessage.addListener(function(request) {
    if (request.action === 'injectCSS') {
        var css = document.createElement('style');
        css.innerHTML = 'div:hover { outline: 1px solid blue; }';
        document.head.appendChild(css);
    }
});

说明：
popup.js监听弹出窗口onClick中按钮 ID 的事件。#yourButton如果触发，消息事件将通过管道传输到当前选定的选项卡并由content.js处理，它通过您的扩展程序清单链接到站点。该脚本然后创建一个新<style>元素，将 CSS 粘贴到其中并将其附加到<head>DOM 的部分。

我希望我能帮上忙！

推荐阅读