google-chrome - 如何从网页上的十六进制字符串获取颜色？例如，通过选择它

Question

这是一个网站 page with documentation 。它解释了图表的颜色选项。

我想知道十六进制字符串的视觉值。我怎样才能得到它？ ColorZilla 的吸管器在这里表现不佳。

最好的选择是选择它并在鼠标右键单击时在 Chrome 菜单中选择“显示颜色”。

操作系统是 Ubuntu，不幸的是，我猜选项可能会受到限制。

Answer 1

这是一种无需创建新选项卡即可实现的高级方法

ma​​nifest.json

{
  "manifest_version": 2,
  "name": "Color Show",
  "description": "",
  "version": "1.0.0",
  "content_scripts": [{
    "js": ["content-script.js"],
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "run_at": "document_end"
  }],
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs",
    "contextMenus"
  ]
}

背景.js

chrome.contextMenus.removeAll(() => { 
    chrome.contextMenus.create({
        title: 'Show color',
        contexts: ['selection'],
        onclick: (e, tab) => {
            const selected = e.selectionText;
            const tabId = tab.id; 

            if(selected.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/)) {
                chrome.tabs.sendMessage(tabId, {
                    color: selected
                });
            }
        }
    });
});

content-script.js

// create simple modal in a shadow dom
const host = document.createElement('div'); 
const shadowRoot = host.attachShadow({mode: 'open'});

// you can tune modal styles here
shadowRoot.innerHTML = '<div id="color_box" style="display:none; position: absolute; top: 0; z-index:9999; width: 80px; height: 80px"></div>';
document.body.appendChild(host);

const colorBox = shadowRoot.getElementById('color_box');

// show color by the message from background script
chrome.runtime.onMessage.addListener(request => {
    colorBox.style.backgroundColor = request.color;
    colorBox.style.display = 'block';
});