-1

コンテンツ スクリプトを使用して、Google ホームページのみの黒いバーをブロックする単純な Chrome 拡張機能を作成しています。しかし、ユーザーが検索したら、黒いバーをブロックしたくありません。

つまり、このアドレスに適用する必要があります。

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"目的の結果を得るために使用するアドレスを知っている人はいますか?

4

1 に答える 1

1

マニフェストだけでこれを行うことはできません。プログラムで CSS を挿入する必要があります。

参考：Chrome、「マッチパターンとグロブ」

大小さまざまな問題:

  • Chrome には、 CSS インジェクションが and を無視するというバグexclude_globsexclude_matchesがまだあります。
  • Google はハッシュタグとクエリ パラメータを多用しておりmatches、exclude_matchesそれらには取り組んでいません。
  • Google は AJAX を多用するため、「新しい」ページは新たに読み込まれません。これは、追加する CSS をオフにできる必要があることを意味します。
  • Google は を使用しwww.ます。あなたの一致は次のようでなければなりません: ."http://www.google.com/"
  • "http://google.com"は無効ですmatch。エラーが発生します：

    「{気にしないでください!}」から拡張機能を読み込めませんでした。「content_scripts[0].matches[0]」の無効な値: パスが空です。

解決：

  1. CSS にはクラスを使用し、エレメント CSS を直接変更しないでください。これは切り替えを容易にするためです。
  2. プログラムで CSS を挿入します。
  3. イベントをリッスンしてhashchange、ターゲット要素から新しいクラスをいつ削除するかを認識します。

拡張機能の例を次に示します。

マニフェスト.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"]
}


ブロッカー.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");
        }
    }
}
于 2013-07-01T03:24:26.683 に答える