Помогите получить доступ к вкладкам из панели для расширения хром

Question

Делаю простое расширение для хрома. Оно должно работать как макрос.
К примеру, вводить в формы текст, нажимать на кнопки...
То есть работать с DOM объектами на сайте.

Я уже делал расширения, которые работали с меню или из панели разработчика. Все работало.
Сейчас задумал сделать отдельную панель с кнопками для управления макросами. И тут проблема: скрипты из той панели не работают к вкладкам браузера. Потому хочу попросить помощи у знатоков. Если знаете, напишите, как из панели запускать скрипты з вкладкам браузера?

Вот простой шаблон расширения:

manifest.json

{
    "manifest_version": 3,
    "name": "Макрос",
    "version": "1.1",
    "permissions": ["tabs", "storage", "activeTab", "scripting"],
    "action": {},
    "background": {
        "service_worker": "background.js"
    },
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "host_permissions": [
        "<all_urls>"
    ],
    "content_scripts": [
        {
        "matches": ["<all_urls>"],
        "js": ["contentScript.js"]
        }
    ]
}

background.js

let windowId;
let tabId;
chrome.action.onClicked.addListener((tab) => {
    tabId = tab.id;
    if (windowId) {
    chrome.windows.get(windowId, { populate: true }, (win) => {
        if (chrome.runtime.lastError || !win) {
            createWindow();
        } else {
            chrome.windows.update(windowId, { focused: true });
        }
    });
    } else {
        createWindow();
    }
});

function createWindow() {
    chrome.windows.create({
    url: chrome.runtime.getURL("panel.html"),
    type: "panel",
    width: 300,
    height: 650,
    }, (win) => {
        windowId = win.id;
    });
}

panel.html

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Кнопки і <select></title>
</head>
<body style="background-color: #999">

<form action="form.php" method="post">
    <div style="width: 100%; text-align: center;">
        <button type="button" style="width: 100px;" id="startButton">Старт</button>
    </div>
</form>

<script src="contentScript.js"></script> </body>
</html>

panel.js

document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById("startButton").addEventListener("click", function() {
        chrome.runtime.sendMessage({tabId: chrome.tabs.query({active: true, currentWindow: true})[0].id});
    });
});

contentScript.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
      if (request.tabId) {
          chrome.scripting.executeScript({
          target: {tabId: request.tabId},
          function: startHighlighting
          });
      }
  }
);

function startHighlighting() {
  document.querySelector('#search-input').value = 'прогноз';
}

БЛОГ НА HUSL

Помогите получить доступ к вкладкам из панели для расширения хром

Ответы (0 шт):