Skip to content

Commit 5662f02

Browse files
localjolocaljo
committed
Add starting plugin core, internal messaging port, and inspector JSON
Squashed commits: [ba98299] clean things up [d066c84] move inspector json out of views folder [579f7cf] remove unnecessary comments [e9d7c52] remove more react devtools stuff [5c700b3] add inspector JSON and do some cleanup [4abe686] remove react devtools [b4cd4bc] get page context JSON and pass it to devpanel [8b9c71b] add install instructions [a8e30b7] log inspected page json route [2331720] add blink devtools source as submodule [c7c1a4b] reorganize similar to react devtools clean things up update readme (+1 squashed commit) Squashed commits: [e4b9e22] add skeleton code for devtools extension
1 parent 8fab663 commit 5662f02

10 files changed

Lines changed: 155 additions & 0 deletions

File tree

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[submodule "views/inspector-json"]
2+
path = inspector-json
3+
url = https://github.com/SparkartGroupInc/Inspector-JSON.git

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
A Google Chrome developer tools extension for use by [Solidus](https://github.com/solidusjs/solidus) developers. Provides real-time introspection of API data and access to Solidus server error logs for use in debugging preprocessors executed in the Node.js runtime environment.
2+
3+
**Note:** This is still a work in progress, use at your own risk.
4+
5+
#Installation
6+
* Open chrome://extensions
7+
* Enable 'Developer Mode' checkbox
8+
* Click 'Load unpacked extensions...'
9+
* Select the `devtools-solidus` folder

‎background.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Chrome automatically creates a background.html page for this to execute.
2+
// This can access the inspected page via executeScript
3+
//
4+
// Can use:
5+
// chrome.tabs.*
6+
// chrome.extension.*
7+
8+
var ports = [];
9+
chrome.runtime.onConnect.addListener(function (port) {
10+
if (port.name !== "devtools") return;
11+
ports.push(port);
12+
port.onDisconnect.addListener(function () {
13+
var i = ports.indexOf(port);
14+
if (i !== -1) ports.splice(i, 1);
15+
});
16+
port.onMessage.addListener(function (msg) {
17+
if (msg.tabId) {
18+
getJsonResource(msg.tabId);
19+
} else {
20+
console.log(msg);
21+
}
22+
});
23+
});
24+
25+
chrome.tabs.onUpdated.addListener(function (tabId, changes, tabObject) {
26+
if (changes.status == "complete") {
27+
getJsonResource(tabId);
28+
}
29+
});
30+
31+
// Function to send a message to main.js
32+
function notifyDevtools(msg) {
33+
ports.forEach(function (port) {
34+
port.postMessage(msg);
35+
});
36+
}
37+
38+
function getJsonResource(tabID) {
39+
chrome.tabs.get(tabID, function(tab) {
40+
//Before doing this, we should check if it is a Solidus tab
41+
var jsonResourceURL = tab.url+".json";
42+
var xhr = new XMLHttpRequest();
43+
xhr.open("GET", jsonResourceURL, true);
44+
xhr.onreadystatechange = function() {
45+
if (xhr.readyState == 4) {
46+
var resp = JSON.parse(xhr.responseText);
47+
notifyDevtools(xhr.responseText);
48+
}
49+
}
50+
xhr.send();
51+
});
52+
}

‎icon-128.png‎

3.16 KB
Loading

‎inspector-json‎

Submodule inspector-json added at 5355f00

‎main.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script src="main.js"></script>
5+
</head>
6+
<body>
7+
</body>
8+
</html>

‎main.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Can use
2+
// chrome.devtools.*
3+
// chrome.extension.*
4+
5+
chrome.devtools.panels.create("Solidus", "solidus.png", "views/devpanel.html",
6+
function(panel){
7+
8+
var _window;
9+
var data = [];
10+
var port = chrome.runtime.connect({name: 'devtools'});
11+
12+
port.onMessage.addListener(function(msg) {
13+
// Send message to devpanel, if it exists.
14+
// If there is no panel yet, queue messages for later.
15+
if (_window) {
16+
_window.sendJsonToInspector(msg);
17+
} else {
18+
data.push(msg);
19+
}
20+
});
21+
22+
panel.onShown.addListener(function tmp(panelWindow) {
23+
panel.onShown.removeListener(tmp); // Only run first time
24+
_window = panelWindow;
25+
26+
var msg;
27+
while (msg = data.shift())
28+
_window.sendJsonToInspector(msg);
29+
_window.respond = function(msg) {
30+
port.postMessage(msg);
31+
};
32+
33+
panelWindow.respond(chrome.devtools.inspectedWindow);
34+
});
35+
});

‎manifest.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"manifest_version": 2,
3+
"name": "Solidus Dev Tools",
4+
"version": "0.1.0",
5+
"description": "Adds Solidus debugging tools to the Chrome Developer Tools.",
6+
"icons": { "128": "icon-128.png" },
7+
"devtools_page": "main.html",
8+
"background": {
9+
"scripts": [
10+
"background.js"
11+
]
12+
},
13+
"permissions": [
14+
"tabs",
15+
"http://*/*",
16+
"https://*/*"
17+
],
18+
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
19+
}

‎views/devpanel.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script src="devpanel.js"></script>
5+
<script src="../inspector-json/inspector-json.js"></script>
6+
<link href="../inspector-json/inspector-json.css" media="all" rel="stylesheet" type="text/css">
7+
</head>
8+
<body>
9+
<h2>Page Context</h2>
10+
<div id="pagecontext"></div>
11+
</body>
12+
</html>

‎views/devpanel.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// This runs in the context of the panel in the Dev Tools
2+
//
3+
// Can use
4+
// chrome.devtools.*
5+
// chrome.extension.*
6+
7+
//I think the inspector var needs to be global and just updated here
8+
function sendJsonToInspector(msg) {
9+
if(!inspector) {
10+
var inspector = new InspectorJSON({
11+
element: 'pagecontext',
12+
json: '{"hello":"world"}'
13+
});
14+
}
15+
inspector.view(msg);
16+
}

0 commit comments

Comments
 (0)