Я начинающий программист. Я хотел бы разработать простое расширение для Chrome, которое позволяет выделять жирным шрифтом перетаскиваемый контент, когда я нажимаю кнопку в popup.html. Мне удалось выделить жирный текст для перетаскиваемого содержимого, когда я щелкнул значок по умолчанию, но создание кнопки в popup.html с функцией требовало более сложного способа.
Я думаю, что popup.js необходим для отправки сообщения на content.js, чтобы вызвать функцию boldText (). Я изо всех сил пытался использовать chrome.tabs.sendMessgge или другие вещи, чтобы вызвать функцию, но мне не удалось.
Пожалуйста, дайте мне несколько советов.
Вот мой код:
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. 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();
}
}
function boldText() {
document.designMode = "on"; // designMode on for execCommand
document.execCommand('Bold', false);
document.designMode = "off"; // designMode off for execCommand
return false;
}
4. popup.html
<!doctype html>
<html>
<head>
<script src="jquery-3.3.1.slim.js"></script>
<script src="popup.js"></script>
</head>
<body>
<button id="boldButton" value="bold">bold</button>
</body>
</html>