9

ソース ペインに新しく追加されたスニペットにアクセスする必要がある Chrome 開発者ツール拡張機能を作成したいと考えています。

chrome.devtools API にはスニペットにアクセスする方法はありますか?

ここに画像の説明を入力

4

2 に答える 2

13

はい、 chrome.devtools.inspectedWindow API()で実行できます

追跡できます

a) 利用可能なすべてのスニペットの内容

b) 新しいスニペットとそのコンテンツが追加されたとき

c) スニペットが新しいコンテンツ\変更で更新されたとき。

デバッグなどを有効にするには、実験的な開発者フラグを有効にする必要があります。

次のコードを参考にして、必要に応じて拡張できます。

マニフェスト.json

追加する必要があります

"devtools_page":"devtools.html",

manifest.json ファイルへのコード

サンプル manifest.json

{
"name":"Snippets Demo",
"description":"This demonstrates How to get content from Snippets API",
"devtools_page":"devtools.html",
"manifest_version":2,
"version":"2"
}

devtools.html

インライン スクリプトdevtools.jsを回避するために追加

サンプル devtools.html

<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>

devtools.js

の関連コードを追加

a) chrome.devtools.inspectedWindow.getResources

b) chrome.devtools.inspectedWindow.onResourceAdded.addListener

c) chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener()

サンプル devtools.js

//Fetching all available resources and filtering using name of script snippet added 
chrome.devtools.inspectedWindow.getResources(function (resources){

    // This function returns array of resources available in the current window

    for(i=0;i<resources.length;i++){

        // Matching with current snippet URL

        if(resources[i].url == "Script snippet #1"){
            resources[i].getContent(function (content,encoding){

                alert("encoding is " + encoding);
                alert("content is  "+content);
            });
        }
    }

});

//This can be used for identifying when ever a new resource is added

chrome.devtools.inspectedWindow.onResourceAdded.addListener(function (resource){
    alert("resources added" + resource.url);
    alert("resources content added " + resource.content);
});

//This can be used to detect when ever a resource code is changed/updated

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource,content){
    alert("Resource Changed");
    alert("New Content  " + content);
    alert("New Resource  Object is " + resource);
});

3つのコードをすべてまとめると、

アウトプット 1)

ここに画像の説明を入力

アウトプット 2)

ここに画像の説明を入力

アウトプット 3)

ここに画像の説明を入力

お役に立てれば ：）

于 2012-12-01T07:33:04.910 に答える
0

私はこれを探していましたが、受け入れられた回答はかなり古く、2016 年 1 月現在、localStorage.

以下も参照してください。

https://github.com/bahmutov/code-snippets/issues/23
Chrome Dev Tool のスニペットはどのファイルに保存されますか?

于 2016-02-15T04:52:32.000 に答える