9

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?

enter image description here

Mohsen
  • 64,437
  • 34
  • 159
  • 186

2 Answers2

13

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)

enter image description here

Output 2)

enter image description here

Output 3)

enter image description here

Hope this helps :)

Community
  • 1
  • 1
Sudarshan
  • 18,140
  • 7
  • 53
  • 61
  • 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? – Mohsen Dec 02 '12 at 01:05
  • 1
    @Mohsen: Thanks for appreciating, Apart from filter `resource.type=='script'` there are no specific filters for snippets or Experimental API()'s available till date :( – Sudarshan Dec 02 '12 at 09:40
  • resource.content returns always "undefined" is this code not working anymore? – Micheal Toru Jun 23 '18 at 10:56
0

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?

Community
  • 1
  • 1
Daniel Lizik
  • 3,058
  • 2
  • 20
  • 42