google-chrome - 我可以使用chrome.devtools API访问JavaScript代码段吗？

我想制作一个Chrome开发人员工具扩展程序，该扩展程序需要访问“源代码” Pane 中新添加的代码段。

chrome.devtools API是否可以访问代码段？

最佳答案

是的，您可以通过chrome.devtools.inspectedWindow API()来完成

您可以跟踪

a) Content of all Snippets available

b) When ever a new Snippet is added and its content

c) When ever a Snippet is Updated with new content\modified.

如何启用调试等，您必须enable experimental developer flags。

您可以将以下代码作为引用，也可以根据需要对其进行扩展。

manifest.json

您必须添加

代码到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以避免inline scripting

示例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)

希望这可以帮助 :)

关于google-chrome - 我可以使用chrome.devtools API访问JavaScript代码段吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13653047/