Building this into a Chrome Extension - can't point to your script directly yet

[siakaramalegos]

Hi there - thanks for making such a great tool. I love it, but sadly it does not work on pages that block iframes. So I'm working on building it into a Chrome Extension to try to get around this. Long term, it might be nice to have it there anyway for folks confused by bookmarklets.

I have not figured out the x-frame-options header issue yet, but assuming that eventually happens, another issue is I can't point to your script directly yet. This is because you're querying the document for a script tag to get the base URL. For now, I've pasted it directly there: https://github.com/siakaramalegos/resp-image-lint-extension/blob/main/RespImageLint.js#L1007C191-L1007C245

The idea is to use the same base code and point to your stuff for sponsoring, etc. This is just a convenience wrapper.

[siakaramalegos]

I guess the question is, first, how do you feel about this? And secondly, if you like the idea, do you have a way you'd prefer to handle the baseURL issue that is easy for both of the bookmarklet and chrome extension to maintain?

[peter-neumann-dev]

Hi @siakaramalegos, I have already made a Chrome extension for myself as a workaround because I use a browser (Arc) that does not support bookmarklets yet. It is available in the chrome web store. You can check it out here: https://github.com/peter-neumann-dev/responsive-image-linter

For now, I kept the script just forked and changed the baseURL stuff as well. If the extension retrieves more updates frequently again, there should be a better way to keep it sync.

More here as well: #84

[ausi]

how do you feel about this?

It’s great to see people using it. And I’m a little embarrassed that it works so unstable due to it being a bookmarklet. I still plan to transform it into a dev tools extension, but that might take a little longer still 😬
Having browser extensions from @siakaramalegos and @peter-neumann-dev to fill that gap in the meantime is totally fine with me. We should probably also link to them in the “Usage” section of the readme, wdyt?

… I can't point to your script directly yet. This is because you're querying the document for a script tag to get the base URL.

Would it help if I implement a fallback like this?

const scriptBase = script ? script.src.split('?')[0].replace(/[^/]+$/, '') : 'https://ausi.github.io/respimagelint/';

[siakaramalegos]

@peter-neumann-dev very cool! I didn't even think of searching for an existing extension. Maybe we could combine our efforts. Might wait until I can figure out the iframe issue with my simple version first.

@ausi that's great! I think something like that would work great. I've done so much this week my brain didn't even think of using the code version of solving that problem lol. For referencing in the readme, that sounds great. Peter's is public and shareworthy. I need to figure out the iframe issue, and if I can get it to work, maybe I'll do a PR to Peter's repo. If not, I have another idea involving Cloudflare edge workers.

The back story is I'm a perf engineer so always have used the bookmarklet, mostly for the sizes attribute help. However, now I work at Shopify and it doesn't work on any of our sites since we send headers to block iframes. 😭

[peter-neumann-dev]

Fine for me as well 👍 Luckily, it was working on all my projects because there are no iFrames involved. 😃

The extension has around 300 users right now. I will do my best to keep it updated when there are changes in this repo.

[siakaramalegos]

I got it working!! https://github.com/siakaramalegos/resp-image-lint-extension

@peter-neumann-dev do you prefer to merge in my code or maintain a separate extension? Yours has a more complex file structure, so I'm guessing you'd want to structure it differently than I did. Let me know what you're thinking either way!

@ausi if you can make that tiny script change, it will be easier for us to maintain extensions too.

[siakaramalegos]

Unrelated - noticed this warning in the extension logs in case you wanted to optimize the code slightly @ausi

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

[peter-neumann-dev]

@siakaramalegos Nice! 🎉 I think the structure in my extension is looking more complex than it looks at a first glance. As I can see from your commit, it seems we only have to adjust two files:

• the manifest.json (https://github.com/peter-neumann-dev/responsive-image-linter/blob/main/src/manifest.json)
• the service-worker.js (https://github.com/peter-neumann-dev/responsive-image-linter/blob/main/src/service-worker.js) seems very similar to your background.js

If you like, you can create a pull request, or I'll add the same changes in mine extension. Do you have an example page where I can test the previous not working linting?

[siakaramalegos]

Yes, any Shopify store, but for convience here's our blog that we also built on shopify: https://performance.shopify.com/

[peter-neumann-dev]

Yes, I can reproduce it. Will you create a PR, or should I add the changes myself @siakaramalegos?

[ausi]

if you can make that tiny script change

Done in f2002aa

noticed this warning in the extension logs in case you wanted to optimize the code slightly

Done in 134a5ae

[ausi]

We should probably also link to them in the “Usage” section of the readme, wdyt?

I added a link to Peters extension now: https://github.com/ausi/respimagelint#usage

@siakaramalegos I’d also add a link to your extension once finished. Can you notify me then?

[siakaramalegos]

Sure! Though I gave Peter a PR so it looks like it will just be one extension once we get it all ready. I'm so excited!

…

On Fri, Aug 4, 2023, 4:16 PM Martin Auswöger ***@***.***> wrote: We should probably also link to them in the “Usage” section of the readme, wdyt? I added a link to Peters extension now: https://github.com/ausi/respimagelint#usage @siakaramalegos <https://github.com/siakaramalegos> I’d also add a link to your extension once finished. Can you notify me then? — Reply to this email directly, view it on GitHub <#87 (comment)> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABEOLMP3YOAOLAWTZ2OX4CLXTVKBDBFKMF2HI4TJMJ2XIZLTSOBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDUOJ2WLJDOMFWWLLTXMF2GG2C7MFRXI2LWNF2HTAVFOZQWY5LFUVUXG43VMWSG4YLNMWVXI2DSMVQWIX3UPFYGLLDTOVRGUZLDORPXI6LQMWWES43TOVSUG33NNVSW45FGORXXA2LDOOJIFJDUPFYGLKTSMVYG643JORXXE6NFOZQWY5LFVA2TKMZQGA4TIOMCUR2HS4DFUVUXG43VMWSXMYLMOVS2UMJYGM2TOMZQGY2TTJ3UOJUWOZ3FOKTGG4TFMF2GK> . You are receiving this email because you were mentioned. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

[peter-neumann-dev]

I have released a new version of the extension and submitted the update to the Chrome Web Store for review. Once it is approved, the new version will be available automatically through the store. 🤞🏻😃

[peter-neumann-dev]

It is now published finally. After updating, you have to reactivate and accept to the new permission that it can block content. Afterward, it is working everywhere in my tests 👍🏻 🙂