Предельный CSS-файл вводится только на домашнюю страницу сайта (ничего из домена)

Question

Я создаю простое расширение Chrome, которое блокирует черную полосу только Google homepage с использованием content script. Но я не хочу, чтобы он блокировал черную полосу, как только пользователь выполнил поиск.

То есть, я хочу, чтобы применить к этому адресу:

http://www.google.com

Но не этот адрес:

http://www.google.com/search-terms-here/

В manifest.json я использовал это, чтобы заблокировать строку:

"content_scripts": [ 
    { 
    "matches": ["http://google.com"], 
    "css": ["blocker.css"] 
    } 

Но с использованием "matches": ["http://google.com"] не работает. Кто-нибудь знает, какой адрес я должен использовать под "matches", чтобы получить желаемый результат?

Answer 1

Вы не можете сделать это с помощью манифеста в одиночку, вы должны программно ввести CSS.

Ссылка: Chrome, "Match patterns and globs"

Несколько вопросов, большое малым:

• Chrome still has a bug whereby CSS injection ignores exclude_globs and exclude_matches.
• Google активно использует хэштеги и параметры запроса, а matches и exclude_matches не работают на них.
• Google активно использует AJAX, поэтому «новые» страницы не загружаются свежими. Это означает, что вы должны иметь возможность отключать все CSS, которые вы добавляете.
• Google использует www.. Ваши совпадения должны быть такими: " http://www.google.com/ ".
• " http://google.com " недействителен для match. Это даст ошибку:

  Could not load extension from '{never you mind!}'. Invalid value for 'content_scripts[0].matches[0]': Empty path.

---

Решение:

1. Используйте классы для вашего CSS, не изменять элемент CSS непосредственно. Это для удобства переключения.
2. Программно вводить CSS.
3. Слушайте событие hashchange, чтобы узнать, когда нужно удалить новые классы из целевых элементов.

Вот пример расширения:

manifest.json:

{ 
    "manifest_version": 2, 
    "content_scripts": [ { 
     "js":    [ "CSS_handler.js" ], 
     "matches":   [ "http://www.google.com/", "https://www.google.com/" ], 
     "exclude_globs": [ "http://www.google.com/#*", "https://www.google.com/#*" ] 
    } ], 
    "name":   "AJAX aware, CSS injection switching", 
    "description": "From SO 17395877. Inject at home page, not 'results' pages. css property fires incorrectly due to bug. Target pages (Google) load 'new' pages via AJAX.", 
    "version":  "1", 
    "web_accessible_resources": ["blocker.css"] 
} 

blocker.css:

.mycsHide { 
    display: none !important; 
} 

CSS_handler.js:

var link = document.createElement ("link"); 
link.href = chrome.extension.getURL ("blocker.css"); 
link.type = "text/css"; 
link.rel = "stylesheet"; 
document.head.appendChild (link); 

//-- Global vars 
var cssSelectorsToHide = [ 
    "#gbz", 
    "#gbx3" 
]; 
var hideElems   = true; 


//-- Initial run on cold start or full reload. 
fireOnNewPage(); 

//-- Run on "new" ajax pages. 
window.addEventListener ("hashchange", fireOnNewPage, false); 

function fireOnNewPage() { 
    /*-- Only hide if there is no hash or URL params. 
     The manifest makes sure there is no path. 
    */ 
    hideElems = ! (location.hash || location.search); 

    cssSelectorsToHide.forEach (setElemVisibility); 
} 

function setElemVisibility (selector) { 
    var nodes = document.querySelectorAll (selector); 

    //-- Add or remove our special CSS class... 
    for (var J = nodes.length - 1; J >= 0; --J) { 
     if (hideElems) { 
      nodes[J].classList.add ("mycsHide"); 
     } 
     else { 
      nodes[J].classList.remove ("mycsHide"); 
     } 
    } 
}