added context menu

Author: joshua0308

src/extension/background.js

@@ -145,3 +145,27 @@ chrome.tabs.onRemoved.addListener(tabId => {
   // delete the tab from the tabsObj
   delete tabsObj[tabId];
 });
+
+// when react time travel is installed
+// create a context menu that will open our devtools in a new window
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'react-time-travel',
+    title: 'React Time Travel',
+    contexts: ['page', 'selection', 'image', 'link'],
+  });
+});
+
+// when context menu is clicked, listen for the menuItemId,
+// if user clicked on react-time-travel, open the devtools window
+chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
+  const options = {
+    type: 'panel',
+    left: 0,
+    top: 0,
+    width: 380,
+    height: window.screen.availHeight,
+    url: chrome.runtime.getURL('panel.html'),
+  };
+  if (menuItemId === 'react-time-travel') chrome.windows.create(options);
+});

src/extension/build/devtools.js

@@ -1,2 +1 @@
-chrome.devtools.panels.create('React Time-Travel', null, 'panel.html', () => {
-});
+chrome.devtools.panels.create('React Time Travel', null, 'panel.html', () => {});

src/extension/build/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "React Time-Travel",
+  "name": "React Time Travel",
   "version": "1.0",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React by memorizing the state of components with every render.",