Javascript Chrome扩展开发：通过单击popup.html中的颜色按钮来更改字体颜色_Javascript_Html_Google Chrome Extension

Javascript Chrome扩展开发：通过单击popup.html中的颜色按钮来更改字体颜色

javascript html google-chrome-extension

Javascript Chrome扩展开发：通过单击popup.html中的颜色按钮来更改字体颜色,javascript,html,google-chrome-extension,Javascript,Html,Google Chrome Extension,我尝试开发一个简单的Chrome扩展，当我点击popup.html中的一个按钮时，它允许更改拖动内容的字体颜色。我使用document.execCommand，但我不知道如何传输从colorbox中选择的颜色值。请帮帮我这是我的密码： 1。manifest.json 4。content.js {message:“colormap”，color}不是一个，而是一个构建它的传统方法是{message:“colormap”，color:color}，但您使用的是可接受的因此，您不应该使用类似[0

我尝试开发一个简单的Chrome扩展，当我点击popup.html中的一个按钮时，它允许更改拖动内容的字体颜色。我使用document.execCommand，但我不知道如何传输从colorbox中选择的颜色值。请帮帮我

这是我的密码：

1。manifest.json

4。content.js

{message:“colormap”，color}

不是一个，而是一个

构建它的传统方法是

{message:“colormap”，color:color}

，但您使用的是可接受的

因此，您不应该使用类似

[0]

的数组索引来访问其组件。事实上，没有任何概念或“顺序”是相同的，

{a:“a”，b:“b”}

和

{b:“b”，a:“a”}

是相同的，那么哪一个是第0位呢

以下是您如何做到这一点：

else if (request.message == "colormap") { // Accessing property "message" of the object "request"
  console.log(request.message);
  value = request.color; // Accessing property "color" of the object "request"
//value = request["color"]; // Alternative syntax
  console.log(value);
}

谢谢！但是，该功能仍然不起作用。我认为您的评论可以在解决这个问题后应用，我将在下面描述我认为在popup.js中没有选择颜色是有问题的。当我点击“输入类型=颜色”按钮时，一个颜色映射被打开。但是，当我依次单击颜色贴图中的颜色时，所选颜色不会反映在按钮上，甚至不会显示颜色代码。你对此有什么想法吗？

<!doctype html>
<html>
  <head>
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="fontColorButton">Font Color</button>
    <input  id="colormap" type="color" value="#000000"/>
  </body>
</html>

$(document).ready(function() {
  $('#fontColorButton').click(function() {
     chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {message: "forecolor"});
     });
  });
  $('#colormap').click(function() {
    colormap = document.querySelector("#colormap");
    color = colormap.select();
    chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {message: "colormap", color});
    });
  });
});

chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.message == "forecolor") {
    TextMode(request.message, value);
  }
  else if (request.message[0] == "colormap") {
    console.log(request.message[0]);
    value = request.message[1];
   console.log(value);
  }
});

function TextMode(mode, value) {
  document.designMode = "on"; // designMode on for execCommand
  document.execCommand(mode, false, value);
  document.designMode = "off"; // designMode off for execCommand
  return false;
}

else if (request.message == "colormap") { // Accessing property "message" of the object "request"
  console.log(request.message);
  value = request.color; // Accessing property "color" of the object "request"
//value = request["color"]; // Alternative syntax
  console.log(value);
}