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"
}

开发工具.html

添加devtools.js以避免内联脚本

示例 devtools.html

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

开发工具.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 开发工具的片段保存在哪个文件？

于 2016-02-15T04:52:32.000 回答