Hello. This is how I add styles, but they are automatically added for all pages listed in the manifest.

How to add css to a specific tab: through the manifest or programmatically?

  1. through the manifest:

    "permissions": [ "tabs", "www.site1.ru/*", "site2.ru/*"], "content_scripts": [{ "matches": ["www.site1.ru/javascript/*", "site2.ru/javascript/*"], "css": ["css/my_style.css"], "js": ["content_scripts.js"] }],

  2. programmatically: from content_scripts.js, it doesn't work for me:

     chrome.tabs.insertCSS(null,{file:"css/my_style.css"});

    so too:

     chrome.tabs.executeScript({ code: 'document.body.style.backgroundColor="red"' });
  • Do not add the plugin label. In this matter, it does not make sense. - VenZell
  • do CSS connections in extensions and plugins differ? - Max
  • Chrome doesn't have plugins, but extensions. Therefore, the label plugin does not make sense. You already have a label chrome-extension - VenZell
  • quote: At Chrome not plug-ins, but extensions. OK. - Max

1 answer 1

If you want to set styles depending on conditions, some criteria or based on the content of the page, then use the software add.

In rows

 chrome.tabs.insertCSS(null,{file:"css/my_style.css"});

and

 chrome.tabs.executeScript({ code: 'document.body.style.backgroundColor="red"' });

You do not specify the tabId parameter.

The script; defaults to the active tab of the current window.

Because of this, the code will be executed for the current active tab, and not in the specific tab you defined.

You can use the query function.

This function will return all tabs that meet the criteria you specified.

For example, tabs with the specified page header, active or inactive, status, url, and so on.

A complete list of parameters is listed here .

Read Programmatic injection

You can make the assumption that you call the executeScript and insertCSS from

 "content_scripts": [{ "matches": ["www.site1.ru/javascript/\*", "site2.ru/javascript/\*"], "css": ["css/my_style.css"], "js": ["content_scripts.js"] }]

=> content_scripts.js

In this case, they will not work for sure, because

Here are some examples of content scripts can do:

  • Find unlinked URLs in web pages and convert them into hyperlinks
  • Increase text
  • However, content scripts have some limitations.

They cant:

Use chrome. * APIs, with the exception of:

  • extension (getURL, inIncognitoContext, lastError, onRequest, sendRequest)
  • i18n
  • runtime (connect, getManifest, getURL, id, onConnect, onMessage, sendMessage)
  • storage

Use Use

Ie content_scripts cannot use chrome.tabs.api* functionality.

If you need to use this functionality, then you need to put the code in the background script.

In manifest.json

 "background": { "scripts": ["script.js"] }

And actions with tabs perform in it.

Read about Execution environment

  • So I call from: content_scripts.js. You brought links: thanks, but they will not help much since with English it is not very. - Max
  • @ Max, use the translator , the meaning will be clear. You can already start from what I wrote to you in the answer. - UserName
  • Is it possible to solve the problem for sontent_script: using getURL (); var css = chrome.extension.getURL ("css / my_style.css"); - Max
  • Script <script src = "content_scripts.js"> </ script> thus added, CSS also added to the console is visible, but not applied to the page, possibly because the DOM is built - Max
  • @ Max, I did not understand anything. <script src = "content_scripts.js"> </ script> what is it? Why do you need this? - UserName