google-chrome-extension
Скрипты содержимого

замечания

Объявление скриптов содержимого в манифесте

Контентные скрипты могут быть объявлены в manifest.json которые будут всегда вводиться на страницы, соответствующие шаблону URL .

Минимальный пример

"content_scripts" : [
  {
    "js": ["content.js"],
    "css": ["content.css"]
    "matches": ["http://example.com/*"]
  }
]

Этот манифест запись инструктирует Chrome , чтобы ввести содержание сценариев content.js вместе с CSS файлом content.css , после любой навигации на страницу , соответствующей шаблон соответствия http://example.com/*

Оба ключа js и css являются необязательными: у вас может быть только один из них или оба в зависимости от того, что вам нужно.

content_scripts key - это массив, и вы можете объявить несколько определений сценариев контента:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]

Обратите внимание, что как js и matches являются массивами, даже если у вас есть только одна запись.

Дополнительные параметры доступны в официальной документации и других примерах.

Важная заметка

Контент-скрипты, объявленные в манифесте, будут введены только после новых загрузок . Они не будут введены в существующие вкладки. Это также относится к перезагрузке при разработке и расширению обновлений после выпуска.

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

Внедрение скриптов содержимого с дополнительной страницы

Если вместо того, чтобы всегда иметь сценарий содержимого, введенный на основе URL-адреса, вы хотите напрямую контролировать, когда вводится сценарий содержимого, вы можете использовать Programmatic Injection .

Минимальный пример

• JavaScript

  chrome.tabs.executeScript({file: "content.js"});
  

• CSS

  chrome.tabs.insertCSS({file: "content.css"});
  

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

Встроенный код

Вы можете выполнить встроенный код вместо файла в качестве скрипта содержимого:

var code = "console.log('This code will execute as a content script');";
chrome.tabs.executeScript({code: code});

Выбор вкладки

Вы можете предоставить идентификатор табуляции (обычно из других методов chrome.tabs или обмена сообщениями) для выполнения на вкладке, отличной от текущей.

chrome.tabs.executeScript({
  tabId: tabId,
  file: "content.js"
});

Дополнительные параметры доступны в документации chrome.tabs.executeScript() и в других примерах.

права доступа

Использование chrome.tabs.executeScript() не требует разрешения "tabs" , но требует разрешения хоста для URL-адреса страницы.

Проверка ошибок

Если сбой сценария невозможен, его можно поймать в необязательном обратном вызове:

chrome.tabs.executeScript({file: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error("Script injection failed: " + chrome.runtime.lastError.message);
  }
});

Несколько сценариев контента в манифесте

Те же условия, несколько сценариев

Если вам нужно добавить несколько файлов, при этом все остальные условия будут одинаковыми, например, чтобы включить библиотеку, вы можете перечислить все из них в массиве "js" :

"content_scripts" : [
  {
    "js": ["library.js", "content.js"],
    "matches": ["http://*.example.com/*"]
  }
]

Вопросы для заказа: library.js будет выполнен до content.js .

Те же сценарии, несколько сайтов

Если вам нужно вводить те же файлы на несколько сайтов, вы можете предоставить несколько шаблонов соответствия:

"matches": ["http://example.com/*", "http://example.org/*"]

Если вам нужно вводить в основном каждую страницу, вы можете использовать шаблоны с широким соответствием, такие как "*://*/*" (соответствует каждой странице HTTP (S)) или "<all_urls>" (соответствует каждой поддерживаемой странице ).

Различные сценарии или разные сайты

Раздел "content_scripts" является массивом, поэтому можно определить несколько блоков сценария контента:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]