Chrome 확장 스타일을 삽입하지 않았습니다.

'reddit'사이트에 특정 기능을 추가하는 Chrome 용 확장 프로그램을 작성했습니다. 그것은 다음과 같은 jQuery로 사이트에 각 게시물에 추가 버튼을 추가Chrome 확장 스타일을 삽입하지 않았습니다.

...  
$(this).append('<li><span class="grab_button">grab</span></li>'); 
...

클래스 grab_button은 새로운 기능입니다. 그것은 레딧 스타일 시트에 존재하지 않지만, 확장 스타일 시트 크롬에서 CSS가 적용되지 않는로드하도록되어 :

html body span.grab_button { 
     color: #888 !important; 
     font-weight: bold !important; 
     padding: 0 1px !important; 
}

나는 무시됩니다 적용됩니다 있는지 어떤 CSS를 만들기 위해 !important 규칙을 추가했습니다. 나는 그 정의를 매우 구체적으로 만들었습니다. (아마도 좀 더 구체적으로 만들 수는 있었지만 그렇게 할 필요는 없었습니다). 왜 지구상에 적용되지 않는거야? 웹킷 개발자 도구를 사용하여 추가 된 버튼을 검사하면 해당 스타일에 적용되는 모든 스타일이 나열됩니다. 심지어 무시되는 스타일도 포함되지만 사용자 정의 스타일은 표시되지 않습니다. 이 작동하지 않는 이유

"content_scripts": [ 
     { 
      "matches": ["http://www.reddit.com/*"], 
      "js": ["jquery-2.0.3.min.js", "script.js"], 
     "css": ["style.css"] 
     } 
], 

"web_accessible_resources": [ 
     "style.css", 
    "script.js", 
    "jquery-2.0.3.min.js" 
]

사람이 설명 할 수 : 여기

매니페스트의와 관계있는 부분입니까?

출처

2013-07-19 p0llard

선택기가 잘못되었습니다. 마크 업은 classname이 grab_button 인 스팬을 생성하지만 CSS 코드는 해당 클래스 이름과 하위 클래스가 포함 된 스팬과 일치합니다. 귀하의 CSS 선택기 코드가 있어야한다 :

html body span.grab_button {

또는 더 나은 아직, 그냥 :

.grab_button {

모든 그 물건이 필요하지 않은 이전과 것은 그냥 느린 있습니다.

출처

2013-07-19 14:21:06 Fotiman

.grab_button on own은 작동하지 않습니다. 그 공백을 제거하는 중 하나도 작동하지 않습니다 ... 그것을 구체화하기 위해, 그것을 구체적으로 만들려고 html 본문 스팬을 추가했습니다. 그러나 그렇지 않았습니다. – p0llard

내가 말할 수있는 것부터는 효과가있다. 누군가 다른 사람이 소리를 지르지 만, 나는 명백한 어떤 것도 보지 못합니다. – Fotiman

알아. 그것은 작동해야합니다. 필자는 스타일 시트를 삭제하고 조각으로 다시 만들고, 각 변경 후에 확장을 다시로드하여 문제를 해결했습니다. 작동하지 못하게 막는 이유가 없습니다. – p0llard

Chrome 확장 스타일을 삽입하지 않았습니다.

답변

관련 문제