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

Question

I try to develop a simple Chrome extension that allows to change font color for dragged content, when I click a button in popup.html. 我尝试开发一个简单的Chrome扩展程序，当我单击popup.html中的按钮时，该扩展程序可以更改所拖动内容的字体颜色。 I use document.execCommand, but I don`t know how to transfer the color value which I chose from colorbox. 我使用document.execCommand，但是我不知道如何传输从colorbox中选择的颜色值。 Please help me. 请帮我。

Here are my codes: 这是我的代码：

1. manifest.json 1. manifest.json

{
 "manifest_version": 2,
 "name": "test",
 "version" : "1.0",
 "description": "test",

 "content_scripts": [{
    "matches":    ["<all_urls>"],
    "js":         ["content.js"]
 }],

 "background": {
    "scripts": ["jquery-3.3.1.slim.js", "background.js"]
 },

 "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
 },

"permissions": [
    "activeTab",
    "tabs",
    "storage",
    "http://*/*",
    "https://*/*"
 ]
}

2. popup.html 2. popup.html

<!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>

3. popup.js 3. popup.js

$(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});
    });
  });
});

4. content.js 4. content.js

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;
}

Answer 1

{message: "colormap", color} is not an Array , but rather an Object . {message: "colormap", color}不是Array ，而是Object 。

A traditional way of constructing it would be {message: "colormap", color: color} but what you used is an acceptable literal shorthand in ES6 . 构造它的传统方式是{message: "colormap", color: color}但是您使用的是ES6中可接受的文字速记。

So you should not be accessing its components with array indexing like [0] . 因此，您不应使用[0]这样的数组索引来访问其组件。 There is, in fact, no notion or "order" of those, {a: "a", b: "b"} and {b: "b", a: "a"} are the same, so which one is 0th?. 实际上， {a: "a", b: "b"}和{b: "b", a: "a"}没有概念或“顺序”相同，因此哪个是0th?。

Here's how you can do it: 您可以按照以下方法进行操作：

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);
}

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

问题描述

1 个解决方案

解决方案1
0 2018-07-05 11:43:10

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

问题描述

1 个解决方案

解决方案1 0 2018-07-05 11:43:10

解决方案1
0 2018-07-05 11:43:10