크롬 확장 콘텐츠 - 스크립트 javascript - run_at document_end가 올바르게 작동하지 않습니다.

Question

테스트로서, 페이스 북의 오른쪽에있는 "뉴스"섹션과 오른쪽 광고를 숨기는 크롬 확장을 만듭니다. 또한 배경색을 검정색으로 변경하십시오.

내 문제는 페이스 북을로드 할 때 뉴스와 흰색 배경이 잠깐 동안 나타난 다음 사라지는 것입니다. 그래서 run_at을 document_end으로 설정하면 페이지가 이미로드 된 후 자바 스크립트가 실행됩니다. document_start과 document_idle도 비슷한 결과를 보았습니다. 뉴스 섹션이 전혀 나타나지 않도록하려면 어떻게해야합니까?

의 manifest.json :

{ 
    "manifest_version": 2, 

    "name": "FB_Trending_Hide_ChromeExtension", 
    "description": "This extension will hide the trending news section of Facebook", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png" 
    }, 
    "content_scripts": [{ 
    "run_at": "document_end", 
    "matches": ["*://*.facebook.com/*"], 
    "js": ["content.js"], 
    "all_frames": true 
    }], 
    "permissions": [ 
    "tabs", "*://*.facebook.com/*", "activeTab" 
    ] 
} 

content.js는 :

document.getElementById("pagelet_trending_tags_and_topics").style.display = 'none'; 
document.getElementById("pagelet_ego_pane").style.display = 'none'; 
document.body.style.background = 'black'; 

Answer 1

이것은 CSS, "css", content_scripts 항목이 아닌 자바 스크립트, "js"의 작업처럼 보인다. CSS를 사용하는 것이 더 쉬워야합니다. 요소가 페이지에 동적으로 추가 될 수 있다고 생각할 필요조차 없습니다.

manifest.json을 (content_scripts 부분 만) :

"content_scripts": [{ 
    "run_at": "document_start", 
    "matches": ["*://*.facebook.com/*"], 
    "css": ["facebookContent.css"], 
    "all_frames": true 
    }], 

facebookContent.css :

에게 당신은 같은 것을 할 수

#pagelet_trending_tags_and_topics { 
    display:none !important; 
} 
#pagelet_ego_pane { 
    display:none !important; 
} 
body { 
    backgound:black !important; 
}