Разработка расширения Chrome: измените цвет шрифта, нажав кнопку цвета в popup.html - PullRequest
Новая
       3

Разработка расширения Chrome: измените цвет шрифта, нажав кнопку цвета в popup.html

0 голосов
/ 05 июля 2018

Я пытаюсь разработать простое расширение Chrome, которое позволяет менять цвет шрифта для перетаскиваемого содержимого, когда я нажимаю кнопку в popup.html. Я использую document.execCommand, но я не знаю, как передать значение цвета, которое я выбрал из colorbox. Пожалуйста, помогите мне.

Вот мои коды:

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 

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

$(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 

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

1 Ответ

0 голосов
/ 05 июля 2018

{message: "colormap", color} это не массив , а скорее объект .

Традиционный способ его построения будет {message: "colormap", color: color}, но вы используете приемлемый буквальный сокращенный код в ES6 .

Так что вы не должны обращаться к его компонентам с индексированием массива, как [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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...