`editor` is undefined

[Garrett Martin]

I'm building a browser extension that's meant to act as a layer on top of Trix, but specifically on basecamp.com

When trying to access the editor instance from inside the content script, I get undefined:

document.addEventListener("trix-initialize", function(event) {
  const element = event.target;
  const editor = element.editor;

  console.log(element);
  console.log(editor);
});

// => <trix-editor ...>
// => undefined

I'm listening for trix-initialize like @javan recommended in #106, but I have a feeling that running in the context of a browser extension is causing problems.

Steps to Reproduce

Chrome

1. Clone this repo
2. Open Chrome and navigate to chrome://extensions
3. Click Load Unpacked in the top left corner and select the folder of the cloned repo.
4. Log into Basecamp, and navigate to any page that has a Trix field. The browser console should show the same log lines that I posted above in the code sample.

Firefox

1. Clone this repo
2. Open Firefox and navigate to about:debugging
3. Click Load Temporary Add-on, open the folder of the cloned repo, and select the manifest.json file.
4. Log into Basecamp, and navigate to any page that has a Trix field. The browser console should show the same log lines that I posted above in the code sample.

Details

• Trix version: 1.2.2 (I think that's what Basecamp seems to be running)
• Browser name and version: Firefox 72.0.2 and Chrome 80.0.3987.132
• Operating system: macOS Catalina 10.15.3

Once I figure this out, I should be off to the races. Thanks for building Trix!

[J03L R0J0]

Having a similar issue, also while trying to use trix for a chrome extension.

I keep getting error when trying to load trix directly:

Uncaught TypeError: document.registerElement is not a function

I believe it has something to do with it being a chrome extension and loading in an iframe having a different document. I'll keep digging and follow up with any solutions I might find.

Using react and webpack for context.

[Javan Makhmali]

Content script environment

Content scripts can access and modify the page's DOM, just like normal page scripts can. They can also see any changes that were made to the DOM by page scripts.

However, content scripts get a "clean view of the DOM". This means:

• Content scripts cannot see JavaScript variables defined by page scripts.
• If a page script redefines a built-in DOM property, the content script will see the original version of the property, not the redefined version.

The editor property is essentially a variable defined by the page script (trix.js) so you can't access it from an extension's content script.

[J03L R0J0]

@javan Thanks for the reply! based on this seems like it's not possible.

Is there anyway to pass in the editor to trix somehow after the content script loads? Or any other suggestions of ways to hack this to make it work? Really want to use this in a chrome extension.

Either way, thanks again for the reply and for building such a dope tool!

[Garrett Martin]

Thanks for the reply @javan. My issue was that I didn't understand the limitations of content scripts as opposed to page scripts.

@joelrojo I found a workaround that seems to be working for my purposes. You need to inject a script tag into the DOM that is then able to get variables defined by page scripts. Hope that works for you!

[J03L R0J0]

@garrettqmartin8 great find, thanks!