Chrome extension content css

chrome.declarativeContent

Use the chrome.declarativeContent API to take actions depending on the content of a page, without requiring permission to read the page’s content.

To transition from page action to action, see Emulating pageActions with declarativeContent

# Usage

An extension’s action controls the extension’s toolbar icon.

The Declarative Content API allows you to enable your extension’s action depending on the URL of a web page, or if a CSS selector matches an element on the page, without needing to add host permissions or inject a content script.

Use the activeTab permission to interact with a page after the user clicks on the extension’s action.

# Rules

Rules consists of conditions and actions. If any of the conditions is fulfilled, all actions are executed. The actions are setIcon and showAction .

The PageStateMatcher matches web pages if and only if all listed criteria are met. It can match a page url, a css compound selector or the bookmarked state of a page. The following rule enables the extension’s action on Google pages when a password field is present:

let rule1 =  
conditions: [ 
new chrome.declarativeContent.PageStateMatcher( 
pageUrl:  hostSuffix: '.google.com', schemes: ['https'] >, 
css: ["input[type='password']"] 
>) 
], 
actions: [ new chrome.declarativeContent.ShowAction() ]
>; 

All conditions and actions are created via a constructor as shown in the example above.

To also enable the extension’s action for Google sites with a video, you can add a second condition, as each condition is sufficient to trigger all specified actions:

let rule2 =  
conditions: [ 
new chrome.declarativeContent.PageStateMatcher( 
pageUrl:  hostSuffix: '.google.com', schemes: ['https'] >, 
css: ["input[type='password']"] 
>), 
new chrome.declarativeContent.PageStateMatcher( 
css: ["video"] 
>) 
], 
actions: [ new chrome.declarativeContent.ShowAction() ]
>;

The onPageChanged event tests whether any rule has at least one fulfilled condition and executes the actions. Rules persist across browsing sessions; therefore, during extension installation time you should first use removeRules to clear previously installed rules and then use addRules to register new ones.

.runtime.onInstalled.addListener(function(details)  
chrome.declarativeContent.onPageChanged.removeRules(undefined, function()  
chrome.declarativeContent.onPageChanged.addRules([rule2]); 
>);
>);

You should always register or unregister rules in bulk because each of these operations recreates internal data structures. This re-creation is computationally expensive but facilitates a faster matching algorithm.

With the activeTab permission, your extension will not display any permission warnings and when the user clicks the extension action, it will only run on relevant pages.

# Page URL Matching

The PageStateMatcher.pageurl matches when the URL criteria are fulfilled. The most common criteria are a concatenation of either host, path, or url, followed by Contains, Equals, Prefix, or Suffix. The following table contains a few examples:

All criteria are case sensitive. For a complete list of criteria, see UrlFilter.

# CSS Matching

PageStateMatcher.css conditions must be compound selectors, meaning that you can’t include combinators like whitespace or » > » in your selectors. This helps Chrome match the selectors more efficiently.

Compound Selectors (OK)	Complex Selectors (Not OK)
a	div p
iframe.special[src^=’http’]	p>span.highlight
ns|*	p + ol
#abcd:checked	p::first-line

CSS conditions only match displayed elements: if an element that matches your selector is display:none or one of its parent elements is display:none , it doesn’t cause the condition to match. Elements styled with visibility:hidden , positioned off-screen, or hidden by other elements can still make your condition match.

# Bookmarked State Matching

The PageStateMatcher.isBookmarked condition allows matching of the bookmarked state of the current URL in the user’s profile. To make use of this condition the «bookmarks» permission must be declared in the extension manifest.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to inject css in content scripts? #55

How to inject css in content scripts? #55

Comments

I have been trying to build an extension. I am able to add content script but css is not getting injected into content script.

Content script is expected to add dom elements and they need their style.

The text was updated successfully, but these errors were encountered:

Closing for inactivity. Any other consideration, I reopen the issue.

Please give some clarification about content-script’s css.

For Chrome extension I usually use the following manifest.json:

I created file /src/css/contentscript.css but I don’t see any css-files in build folder.

Do I need to change webpack-config or the only way is to inject programmatically?

I don’t like the idea of injecting programmatically because I want to use some react-library and it would be nice to get CSS-bundling as well as JS-bundling. And anyway CSS-file should be placed to build folder somehow automatically.

Thanks in advance for your help!

@Luckerz I made a new boilerplate based on this one: https://github.com/lxieyang/chrome-extension-boilerplate-react
Basically you have to make sure to use the copy-webpack-plugin in the webpack.config.js file to copy your css file in the final build folder.

@Luckerz Hi, you can try this:

Add a new entry in webpack.config.js

"manifest_version": 2, "permissions": [ "*://*.google.com/*" ], "content_scripts": [ < "matches": ["*://*.google.com/*"], "js": ["content.bundle.js"] >] 

// src/js/content.js import "../css/content.css"; 

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

chrome.tabs.executeScript(, function() < if(chrome.runtime.lastError) < console.error("Script injection failed: " + chrome.runtime.lastError.message); >>); 

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

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

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

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

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

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

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

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

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

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

Источник