Firefox extension

[argyleink]

Verified the custom element renders and is fully operational, so it needs an extension build process created, needs a firefox extension lifecycle integration, and some marketing assets to prep for publishing.

[lannonbr]

Would to love use this across both Chrome and Firefox

[argyleink]

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension LOE is low, gotta do this soon!

[argyleink]

workin on this, there's bugs:

• browser defaults are different between chrome and firefox, so this prop map needs updated... https://github.com/GoogleChromeLabs/ProjectVisBug/blob/master/app/utilities/design-properties.js#L5
• firefox addon doesnt seem to like adding a custom element... very hard to debug error happening where the ToolPalette class initializes but doesnt seem to think it has class methods..
• up and down on the keyboard (with fonts at least) can cause the page to move

https://github.com/argyleink/ProjectVisBug/tree/feature/firefox-extension

[argyleink]

steps to setup dev env:

• setup https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext#Testing_out_an_extension
• then run web-ext run
  • will open Firefox with extension installed
  • double check by visiting about:debugging in the url bar, then click "debug"
  • as well as about:addons
• visit a webpage
• click the puzzle piece in the top right (should say VisBug when hovered)
• then go look at your logs: one in the debug window from firefox, other is the console of the page

hope that helps someone...

[hfiguiere]

For the icon, I have that commit to fix it: https://github.com/hfiguiere/ProjectVisBug/commit/0e25e52c97b6af39971ceee826cf94bc0a58dc3b

[argyleink]

turns out custom element classes are having a hard time initializing in content script environments link to issue known by firefox team https://bugzilla.mozilla.org/show_bug.cgi?id=1492002#c7

[kud]

Thank you for your work @argyleink I can't wait to see it on firefox!

[argyleink]

we have a new lead to get around the issue, we're going to try injecting visbug from the content script, like

var script = document.createElement('script');
script.src = chrome.runtime.getURL('bundle.js);
document.body.appendChild(script);

which should get us around the current issue (and likely open up 1 or 2 new ones)

will post back soon!

[argyleink]

working through the issues, closer every day

[argyleink]

huge win, just got Visbug to launch on any page as an addon!! 🥂

[argyleink]

to try it out, clone this repo, swap to the firefox-addon branch, run npm run extension:firefox and that's it! it'll open firefox with visbug installed. give it a try!? there's plenty of bugs, list them all!

[corysimmons]

@argyleink What's the best way to live reload this during dev?

[argyleink]

for VisBug general dev, you don't need the extension builds. you can do most the debugging you need in the sandbox page at localhost:3000 with npm i && npm start

for VisBug extension dev, where you want changes from extension lifecycle and visbug web component bundling, that's a bit more involved:

• in one tab, run npm run extension:firefox
• in another tab, run npm start
• in another tab.. yeah, lol, time for a task runner huh?, whenever you change code and rollup is done, run npm run extension:copy. firefox should update the addon hot, chrome usually i manually refresh.

[kezzbracey]

This is a hacky work around for the missing tuts images, so I thought I'd just post it here instead of a PR.

Instead of using a proper setter this gets the addon's URL into the component through an attribute.

So inject.js has:

let tutsBaseURL = src_path.slice(0, src_path.lastIndexOf('/'))
visbug.setAttribute('tutsBaseURL', tutsBaseURL)
// visbug.tutsBaseURL = src_path.slice(0, src_path.lastIndexOf('/'))

And the component constructor has:

// this._tutsBaseURL   = 'tuts' // can be set by content script
this._tutsBaseURL = this.getAttribute('tutsBaseURL');

It ain't pretty, but it gets the images showing up at least.

[corysimmons]

set tutsBaseURL(url) {
    console.log(111111)
    this._tutsBaseURL = url
    this.setup()
  }

How come my console.log doesn't work? :\

The setter is getting triggered in inject.js right?

visbug.tutsBaseURL = src_path.slice(0, src_path.lastIndexOf('/'))

[argyleink]

per the suggestion from @kezzbracey I've updated the logic to use attributes instead properties, and that resolves the path issue to the howto gifs 👍

there's some perf issues to fix, style inspect bugs, syncing color preferences across your firefox instances, etc. plenty of stuff, but support looks within view.

[dotproto]

Just popping in to say I'm interested in helping out with this. I'm currently planning to work on this in my office hours this week. I'll report back on my findings 😁