Search code examples
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtoolscalculator

How to mimic the capability of the debug console with a chrome extension

I am trying to develop a chrome extension for Desmos. My extension needs a way to update the equation cells on the left. One way to do this manually is to open the chrome devtools console and interface with a predefined variable Calc (try Calc.setExpression({"id": "0", "latex": "x = y"})). Ideally, I want to have some sort of a similar functionality that I can use in my chrome extension but I have not found a way to do so. I tried looking through the api, but it is only useful if you are embedding Desmos graphs in your own website. How should I do this?

Solution

  • Here is a sample of it.

    manifest.json

    {
  "manifest_version": 3,
  "name": "hoge",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

    popup.html

    <html>
<body>
  <script src="popup.js"></script>
</body>
</html>

    popup.js

    hoge = () => {
  Calc.setExpression({ "id": "0", "latex": "x = y" })
}

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.scripting.executeScript(
    {
      target: { tabId: tabs[0].id },
      world: "MAIN",
      func: hoge
    }
  );
});