크롬 확장을위한 CSS 삽입

Question

Chrome Extension 개발을 처음 접했습니다. 나는 CSS를 주입하는 것이 가능하다는 것을 알고있다. 그러나 특정 URL에 삽입하는 것이 가능합니다. 예를 들어 google.com을 방문 할 때마다 CSS가 삽입됩니다.

도움 주셔서 감사합니다. :)

Answer 1

음, 프로그램 삽입 및 콘텐츠 스크립트의 두 가지 옵션이 있습니다. 이름은 실제로 복잡하고 무서워 보이지만 걱정하지 마십시오.)

Content Scripts 페이지가로드 될 때 자동으로 삽입됩니다.

{ 
    "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

당신의 기타를 주입해야합니다 (스크립트를 작성에서 분리) 할 필요가, 당신의 manifest.json이 뭔가를 지정하는 것입니다 옵션은 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 
    ] 
} 

행운을!