Разработка расширений Chrome пытается сделать шрифт жирным - PullRequest
0 голосов
/ 02 июля 2018

Я начинающий программист. Я хотел бы разработать простое расширение для Chrome, которое позволяет полужирный для перетаскиваемого содержимого при нажатии на значок.

Вот мой код:

1. manifest.json

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

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

 "background": {
    "scripts": ["background.js"]
 },

 "browser_action": {
    "default_icon": "icon.png"
 },

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

2. background.js

chrome.browserAction.onClicked.addListener(buttonClicked);
function buttonClicked(tab) {
  let msg = {
    txt: "hello"
  }
  chrome.tabs.sendMessage(tab.id, msg);
}

3. content.js

chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendResponse) {
  if (message.txt === "hello") {
    var selection = window.getSelection();
    alert(selection);
    boldText(selection);
  }
}

function boldText(selection) {
  alert(selection);
  selection = selection.toString().bold();
  return false;
}

1 Ответ

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

Чтобы получить текст жирным шрифтом, в современных браузерах реализована функция execCommand, позволяющая выделять жирным шрифтом, подчеркиванием и т. Д. Текст.

Вам просто нужно сделать все содержимое тела редактируемым, а затем запустить exectCommand, например:

function boldText() {
  document.getElementsByTagName("body")[0].setAttribute("contentEditable", "");
  document.execCommand("bold");
}

Я рекомендую вам всегда тестировать непосредственно в консоли ваши манипуляции с DOM (что вы делаете в content.js). (в Chrome нажмите F12, а затем вставьте код) Больше информации в Сделать выделенный текст жирным шрифтом / unbold Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...