I want to make a Chrome Developer Tools Extensions that needs access to newly added snippets in sources pane.
Does chrome.devtools API have any way to access snippets?
Add a comment
|
2 Answers
Yes, you can do it through chrome.devtools.inspectedWindow API()
You can track
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.
How ever for enabling the debugging etc you have to enable experimental developer flags.
You can take following code as a reference and you can extend it as per your requirement.
manifest.json
You have to add
"devtools_page":"devtools.html",
code to your manifest.json file
Sample 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
Add devtools.js to avoid inline scripting
Sample devtools.html
<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>
devtools.js
Add related code for
a) chrome.devtools.inspectedWindow.getResources
b) chrome.devtools.inspectedWindow.onResourceAdded.addListener
c) chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener()
Sample 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);
});
After putting all the 3 codes together you get
Output 1)
Output 2)
Output 3)
Hope this helps :)
3 Comments
Mohsen
Thank you for detailed answer. Relying on
url of resources is not safe. User can change name of snippet on creation. I need to be sure that the resource is a snippet. It's not really impossible to console.log in the script. Context of that script is not usual window. It runs in it's own context (devtools.html). To access devtools for that script you can reach out to chrome://inspect to see that page. While this is very helpful, I still can't access just snippets. Any ideas?
Sudarshan
@Mohsen: Thanks for appreciating, Apart from filter
resource.type=='script' there are no specific filters for snippets or Experimental API()'s available till date :(
Micheal Toru
resource.content returns always "undefined" is this code not working anymore?
I was searching for this but the accepted answer is quite old and, as of Jan 2016 you cannot access snippets via localStorage.
also see:
https://github.com/bahmutov/code-snippets/issues/23
Which file does Snippets of Chrome Dev Tool saved at?
