0

I am creating a chrome extension that allows you to download the JSON displayed on a production logging website. Each of the logs provide an ace editor to display the JSON (this means N number of ace editors for N number of logs, not sure if specific editor selection via jquery is a problem). The intended functionality is to retrieve the contents of the existing ace editor, create a json file, and then download it to disk.

I have added the ace editor API to my chrome extension under content scripts but it seems to be breaking the existing ace editor on the page.

How the editor is normally supposed to look

The ace editor on the webpage before the "Download" button is clicked

The ace editor on the webpage after the "Download" button is clicked

The function that is called when "Download" is clicked:

function initiateJsonDownload(event) {
    let data = event.data.jsonTable;
    // location of the editor on the page.
    let jsonContainer = data.find('.doc-viewer-content > render-directive > div')[0];
    // selection of editor specific to current log
    let editor = ace.edit(jsonContainer);
    // returns undefined
    console.log(editor.selectAll());
}

manifest.json:

{
    "name": "Log Downloader",
    "version": "1.0",
    "description": "Allow users to download logs straight to device",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["thirdParty/node_modules/jquery/dist/jquery.min.js", "selectLogs.js", "thirdParty/ace_editor/ace.js"],
        "run_at": "document_end",
        "matches": ["https://log-website/*"]
    }],
    "background":
    {
        "scripts": ["thirdParty/node_modules/jquery/dist/jquery.min.js"]
    }
  }
Anson Chung
  • 3
  • 2
  • When I suggested to use Ace API I meant a slightly different thing: access the already running Ace in [page context](/a/9517879). – wOxxOm Mar 16 '21 at 05:35
  • Yes that is what I'm trying to do. The code is already in a content script. – Anson Chung Mar 16 '21 at 13:39
  • And that's not what I meant again. You don't need to include Ace in your extension. My suggestion was to insert a short code in [page context](/a/9517879) that will access the API. Make sure you've read the linked answer. – wOxxOm Mar 16 '21 at 14:02
  • Hey @wOxxOm, thanks for the replies. I have read the answer you have sent a couple times but I'm not sure if I'm understanding you completely accurately so please correct me if I'm wrong. To my understanding, within my content script, I am supposed to inject a different non-content script in order to access the global properties of the page. The accessing of the ace editor in our case would be done in the script.js (this is the one being injected) and NOT the contentscript.js. Furthermore, how would I be able to access the ace editor using their API if I am not to include Ace to the extension? – Anson Chung Mar 16 '21 at 17:50
  • That page is already running Ace by itself, you just need to access its API. It will be available as a global variable `ace` in the page script. – wOxxOm Mar 16 '21 at 18:27

1 Answers1

0

I had the same problem but for the Ace JS editor object's setter method, but as a workaround for the getter on simple JSON, I used:

function initiateJsonDownload(event) {
    let data = event.data.jsonTable;
    // location of the editor on the page.
    let jsonContainer = data.find('.doc-viewer-content > render-directive > div')[0];
    // selection of editor specific to current log
    console.log(jsonContainer.innerText);
}

Based on the accepted answer of the page context question, it looks like Method 5: Using world in manifest.json (ManifestV3 only) might work for me if I target Chrome v111+. Sadly, this is not the case for me. :(

sl33nyc
  • 43
  • 4