add manual mode

Author: deeppatel234

example/csr/src/App.js

@@ -1,5 +1,24 @@
 import React, { useEffect, useReducer, useState, useContext } from "react";
-import ContextDevTool from "react-context-devtool";
+// import ContextDevTool from "react-context-devtool";
+
+
+export const ContextDevTool = ({
+  id,
+  context: Context,
+  displayName,
+}) => {
+  return (
+    <Context.Consumer>
+      {(values) => {
+        if (typeof window !== "undefined" && window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK) {
+          window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.debug({ id, displayName, values });
+        }
+        return null;
+      }}
+    </Context.Consumer>
+  );
+};
+
 
 const MyContext1 = React.createContext({});
 const MyContext2 = React.createContext({});
@@ -179,9 +198,9 @@ class App extends React.Component {
             {/* {
               new Array(6000).fill().map((d, ind) => <div>{ind}</div>)
             } */}
-            {/* <MyContext1.Provider value={{ d: 123 , id: counter1 }} sdisplayName="test"> */}
+            <MyContext1.Provider value={{ d: 123 , id: counter1 }} sdisplayName="test">
             {/* <> */}
-                {/* <button onClick={() => this.setState({ counter1: counter1 + 1 })}>Click Me {counter1}</button> */}
+                <button onClick={() => this.setState({ counter1: counter1 + 1 })}>Click Me {counter1}</button>
                 {/* <button onClick={() => changeValue({type: 'increment'})}>ddddddddddddddddddddd</button> */}
                 <Counter />
                 {/* <div id="root1">ssss</div> */}
@@ -192,13 +211,13 @@ class App extends React.Component {
                   counter1 < 5 && <Test />
                 } */}
                 <Test2 id={counter1} />
-                {/* <ContextDevTool
+                <ContextDevTool
                   context={MyContext1}
                   id="cont2"
                   displayName="Demo Context"
-                /> */}
+                />
               {/* </> */}
-             {/* </MyContext1.Provider> */}
+             </MyContext1.Provider>
           </>
         );
     }

packages/devtool-extenstion/extension/core/injectGlobalHook.js

@@ -109,6 +109,29 @@ function injectHelpers(target) {
   };
 }
 
+function manualScriptToInject() {
+  window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.debug = (data) => {
+    const helpers = window.__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK.helpers;
+    window.postMessage(
+      {
+        type: "__REACT_CONTEXT_DEVTOOL_GLOBAL_HOOK_EVENT",
+        subType: "ADD_APP_DATA",
+        data: helpers.parseData({
+          context: {
+            [data.id]: {
+              displayName: data.displayName,
+              value: data.values,
+              valueChanged: true,
+              remove: false,
+            },
+          },
+        }),
+      },
+      "*"
+    );
+  };
+}
+
 /**
  * use react devtool internals for debug
  *
@@ -169,6 +192,7 @@ chrome.runtime.sendMessage(
     injectCode(`
       ${initHook}
       ;(${injectHelpers.toString()}(window))
+      ;(${manualScriptToInject.toString()}(window))
       ;(${installHook.toString()}(window, ${settings}))
     `);
   }

packages/devtool-extenstion/src/containers/Sidebar/index.js

@@ -82,6 +82,9 @@ const Sidebar = () => {
         <div className="filters">
           {settings.debugUseReducer ? <Badge>useReducers List</Badge> : null}
           {settings.debugContext ? <Badge>Context List</Badge> : null}
+          {!settings.debugContext && !settings.debugUseReducer ? (
+            <Badge>Context List</Badge>
+          ) : null}
         </div>
       )}
       <ul className="debuglist">