Не находит Canvas в расширении

Question

Не находит Canvas в расширении

Рейтинг: 1Ответов: 1Опубликовано: 31.07.2023

Пытаюсь создать расширение, которое при появлении canvas на странице выводит информацию в лог base64 этой картинки.

Использую файлы:
background.js

     chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    chrome.tabs.sendMessage(tabId, { action: 'getCanvasDataURL' });
  }
});

content.js

 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getCanvasDataURL') {
    const canvas = document.querySelector('canvas');
    if (canvas) {
      const ctx = canvas.getContext('2d');
      const img = new Image();

      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        const dataURL = canvas.toDataURL('image/jpeg', 1.0);
        sendResponse({ dataURL: dataURL });
      };

      img.src = canvas.toDataURL('image/jpeg', 0.8);
    } else {
      sendResponse({ dataURL: null });
    }
  }
  return true; // Указываем, что ответ будет отправлен асинхронно
});

manifest

{
  "manifest_version": 3,
  "name": "GET_Canvas",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "author": "null",
  "description": "Get base64 canvas ",
  "permissions": [
    "tabs",
    "storage",
    "scripting",
    "webRequest",
    "webNavigation",
    "declarativeNetRequest",
    "contextMenus",
    "activeTab"
  ],
  "action": {
    "default_icon": {
      "48": "icons/48.png"
    },
    "default_title": "CANVAS GET "
  },
  "web_accessible_resources": [
    {
      "resources": [
        
    "content.js"
      ],
      "matches": [
        "<all_urls>"
      ]
    },
    {
      "resources": [
        "content.js"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "icons": {
    "48": "icons/48.png"
  }
}

При установке в браузере никаких изменений не происходит вообще, и скрипт не встраивается в страницу, если же запустить в Tamper Monkey, то все работает отлично. Что я делаю не так?

javascript chrome-extension

Источник: Stack Overflow на русском

Answer 1

▲ 0

Для встраивания content.js на страницы нужно явно подключить его из background:

// background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

  if (changeInfo.status === 'complete') {
  
    chrome.scripting.insertCSS({
      target: { tabId: tabId },
      files: ['content.css'] 
    });

    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ['content.js']
    });

  }

});

Методы chrome.scripting.insertCSS и chrome.scripting.executeScript позволяют явно подключить нужные файлы при срабатывании какого-либо события. Теперь content.js будет вставляться на страницы и взаимодействовать с DOM.

Не находит Canvas в расширении

Ответы