Inject CSS для расширения хрома

Question

Я довольно новичок в разработке Chrome Extension. Я знаю, что можно вводить CSS. Но можно ли вводить его для определенного URL-адреса. Например, всякий раз, когда я посещаю google.com, CSS будет введен.

Спасибо за помощь! :)

Answer 1

У вас есть 2 варианта, программные инъекции и скрипты контента. Названия могут казаться действительно сложными и пугающими, но не волнуйтесь;)

Content Scripts автоматически вводит себя при загрузке страницы. Все, что вам нужно сделать (помимо написания сценария), чтобы указать, что-то подобное в вашем manifest.json:

{ 
    "name": "My extension", 
    "version": "1.0", 
    "manifest_version": 2, 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/"], //where your script should be injected 
     "css": ["css_file.css"] //the name of the file to be injected 
    } 
    ] 
} 

Это должно впрыскивать CSS каждый раз при загрузке google.com

Ваш другой вариант заключается в использовании Programmatic Injection. Это может быть полезно, если вы хотите вводить код только иногда, обычно с фоновой страницы. Для этого вы можете использовать insertCSS(). В этом случае вам нужно host permission в манифесте:

{ 
    "name": "My extension", 
    "version": "1.0", 
    "manifest_version": 2, 
    "background_page": "myBackground.html", //if you want to inject it from a background page 
    "permissions": [ 
    "background", //if you want to inject it from a background page 
    "http://www.google.com/" // host permission to google 
    ] 
} 

удачи!