Chrome Расширение: Как получить ресурсы / ресурсы сайта (CSS, Изображения и т. Д. c) - PullRequest
Новая
       14

Chrome Расширение: Как получить ресурсы / ресурсы сайта (CSS, Изображения и т. Д. c)

0 голосов
/ 07 апреля 2020

Я хочу разработать расширение Chrome, которое читает CSS и изображения веб-сайта. То, что я пытаюсь достичь, будет иметь такую ​​функциональность, как CSS Peeper https://csspeeper.com/. Возможно ли это с скриптом содержимого или фоновым скриптом ? Я пытался найти решение, но не смог найти то, что искал.

манифест. json

{
"manifest_version": 2,
"name": "Get all css rules in stylesheets",
"background": {
  "scripts": ["background.js"],
  "persistent": true
 },
"permissions": ["activeTab", "tabs", "webRequest", "storage", "<all_urls>"],
"version": "1.0",
"page_action": {
"default_icon": {
  "16": "images/get_started16.png",
  "32": "images/get_started32.png",
  "48": "images/get_started48.png",
  "128": "images/get_started128.png"
 }
},
"icons": {
  "16": "images/get_started16.png",
  "32": "images/get_started32.png",
  "48": "images/get_started48.png",
  "128": "images/get_started128.png"
 }
}

Я также пытался копать CSS Peeper код, но я нашел только background. js file: 

/* CSS Peeper background.js file */
chrome.browserAction.onClicked.addListener(function () {
   chrome.tabs.executeScript({
       file: 'scripts/index.js'
   });
   chrome.tabs.insertCSS({
       file: 'styles/page.css'
   });
});

Ответы [ 2 ]

1 голос
/ 07 апреля 2020

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

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

К счастью, существует один такой API, который сделает все за вас: window.getComputedStyle () .

Вот пример того, как использовать его для получения цветов со страницы.

Получить все цвета со страницы, используя javascript

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

Получить каждое изображение со страницы, используя javascript

Как предложено выше, вы можете просто запросить изображения на странице используя document.querySelector('img, svg'), который возвращает NodeList элементов svg и img на странице. Если вы также хотите получить фоновые изображения, вы можете использовать ту же технику, что и выше, но подходящую для background-image вместо значений rgb / rgba.

0 голосов
/ 07 апреля 2020

Я думаю, вам нужно добавить content_script к manifest.json и затем прочитать таблицы стилей, используя document.styleSheets

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js" : ["myscript.js"],
    "run_at": "document_end"
  }
],

В вашем myscript. js файле используйте document.styleSheets, чтобы получить таблицы стилей .

Прочтите это для более подробной информации: https://developer.chrome.com/extensions/content_scripts

Сценарии содержимого - это файлы, которые запускаются в контексте веб-страниц. Используя стандартную объектную модель документа (DOM), они могут читать информацию о веб-страницах, которые посещает браузер, вносить в них изменения и передавать информацию в родительское расширение.

...