POC tota11y as Chrome extension/Firefox add-on #131

nickytonline · 2018-09-15T01:16:44Z

Came across #62 after I created this. Thought it'd be fun to make it an extension and apparently others do too according to #62.

khanbot · 2018-09-15T01:16:51Z

Hey @nickytonline,

Thanks for the PR! Mind signing our Contributor License Agreement?

When you've done so, go ahead and comment [clabot:check] and I'll check again.

Yours truly,
khanbot

nickytonline · 2018-09-15T04:58:19Z

[clabot:check]

khanbot · 2018-09-15T04:58:20Z

CLA signature looks good 👍

nickytonline · 2018-09-15T17:04:30Z

I completely forgot that you can use the same API and conventions for Firefox, so this will work as an extension in FireFox and Chrome.

somewhatabstract · 2019-03-15T22:12:42Z

README.md

+
+then in Chrome, enter `chrome://extensions` in the address bar to load the Chrome extensions  page. At the top left of the Chrome extensions page, click the *Load Unpacked* button. From the file browser, select the `./build` folder and press the *Select* button to load the tota11y Chrome extension unpacked.
+
+## Loading tota11y as an temporary add-on in Firefox


NIT: "as an temporary" -> "as a temporary"

somewhatabstract · 2019-03-15T22:23:13Z

webpack.config.babel.js

@@ -6,6 +6,7 @@ let webpack = require("webpack");
 let autoprefixer = require("autoprefixer");

 let options = require("./utils/options");
+const CopyWebpackPlugin = require("copy-webpack-plugin");


Great! Thanks for using const.

somewhatabstract · 2019-03-15T22:24:04Z

webpack.config.babel.js

+    new CopyWebpackPlugin([
+    {
+        from: "./extension-config",
+        to: "./"


So this copies the config to the output directory? Would you mind adding a comment to that effect?

It copies the the extension configuration and any extension assets to the build folder.

somewhatabstract · 2019-03-15T22:25:15Z

Thanks for this PR, @nickytonline! Great stuff. I had a couple of inline comments; nothing that you necessarily have to act on, but I'd love to hear your feedback. Looking forward to having tota11y as a browser extension!

somewhatabstract · 2019-03-15T22:43:02Z

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 tota11y/
+build/


Given our current build/release process, I'm not sure we can ignore the build directory just yet.

Yeah, I see in your master that the build folder is included in the repo. I'll revert this.

nickytonline · 2019-03-25T22:47:48Z

@somewhatabstract, I was on vacation. I'll check out your feedback this week and update the PR.

nickytonline · 2019-03-26T22:50:47Z

webpack.config.babel.js

@@ -34,6 +35,13 @@ const plugins = [
    new webpack.ProvidePlugin({
        [options.jsxPragma]: path.join(__dirname, "utils", "element"),
    }),
+    // Copies the extension configuration and other extension assets to the build folder.


A little explanation of what this does.

nickytonline · 2019-03-26T23:11:01Z

.eslintrc

@@ -22,6 +22,7 @@
    },
    "globals": {
        "axs": true,
-        "$": true
+        "$": true,
+        "chrome": false


This global is added for the Chrome extension scripts.

I can actually move this global to a .eslintrc file in the extension configuration folder.

nickytonline · 2019-03-26T23:12:23Z

extension-config/manifest.json

+    {
+      "matches": [
+        "https://*/*",
+        "http://*/*"


Even though it's 2019, some sites still use http, so it needs to be supported. YOLO

nickytonline · 2019-03-26T23:14:08Z

extension-config/popup.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>


I went with whatever for the markup and tota11y icon. If you would like this tweaked, let me know.

nickytonline · 2019-03-26T23:14:49Z

extension-config/popup.js

+
+function activateTota11y() {
+    console.log('activating tota11y...');
+    chrome.tabs.executeScript(null, { file: "tota11y.js" });


Only load the script when the user explicitly clicks the checkbox in the extension popup.

nickytonline · 2019-03-26T23:16:39Z

So just a little summary of the approach I took for this. I know the actual script is used as a bookmarklet, so I did not want to interfere with any of that.

The added webpack configuration just copies over the extension configuration to the build folder.

The way the extension works is it only loads the tota11y script once the user checks the checkbox in the extension popup.

The reason for doing this is we don't want the script loading all the time, only when a developer wants to explicitly use it. See https://github.com/Khan/tota11y/pull/131/files#diff-761b689f243e9bf60b5a7effc677551fR13

This technically should work in any Chromium based browser that uses the Chrome Web store, so this means when the new Edge is released, it should work there as well unless they go with their own extension store which is possible. It also works in the Brave Browser, my current browser of choice.

Update May 2019

I figured it would work, but just confirmed that tota11y works in Edge on MacOS. I'll assume it's good to go on Windows as well.

nickytonline · 2019-03-26T23:25:47Z

I purposely haven't checked in the assets for the extension that get copied to the ./build folder for the time being as it would be the Khan team in charge of the deployment.

If you'd like them in the build folder, let me know and I'll commit them.

As is, this PR allows developers to use the extension unpacked as mentioned in the readme. To deploy to the Chrome and FireFox extension stores, IDs will need to be acquired and you'll need to follow the steps for deploying to each of those stores respectively.

The extension already has an icon which I took from your existing logo. Feel free to tweak it if necessary.

Here's some helpful links if no one on the team has ever deployed an extension:

nickytonline · 2019-03-27T04:33:38Z

extension-config/popup.js

@@ -11,18 +11,19 @@ function getActiveTab() {
 function activateTota11y() {
    console.log('activating tota11y...');
    chrome.tabs.executeScript(null, { file: "tota11y.js" });
-    console.log('t0ta11y has been activated.');
+    console.log('tota11y has been activated.');


Fixed a typo.

somewhatabstract · 2019-04-22T16:58:46Z

I haven't forgotten this. I will try to make time this week to give feedback. Thank you for your patience.

somewhatabstract

This is looking pretty good to me. I have some outstanding questions that hopefully you can brainstorm with me:

Should we publish this extension to the Chrome Store when we publish the npm package?
If so, how should we coordinate that? Updated publish instructions? Scripts?
How do we keep the extension version and npm package version in sync?
Should the extension be part of the npm package? (I'm thinking not, so we should make sure that it doesn't get included when the package gets put together)

@kevinbarabash Do you have any thoughts about this?

somewhatabstract · 2019-05-17T17:03:36Z

README.md

+Build the project
+
+```
+npm run build


build or build:prod?

Ahh, I see you made some changes about a month ago. I'd go with npm run build:prod`. I'll update the documentation.

somewhatabstract · 2019-05-17T17:03:44Z

README.md

+Build the project
+
+```
+npm run build


build or build:prod?

Same as above.

somewhatabstract · 2019-05-17T17:04:45Z

extension-config/content-script-comms.js

@@ -0,0 +1,40 @@
+function toggleTota11y(payload, sendResponse) {


Could you add a comment at the top of the file explaining what the file contents are for?

somewhatabstract · 2019-05-17T17:05:22Z

extension-config/manifest.json

+  "manifest_version": 2,
+  "name": "tota11y",
+  "description": "An accessibility visualization toolkit",
+  "version": "1.0",


Should we match the version to our npm package version?

If so, should we add some scripting to ensure that versions stay aligned?

I would bump the version, currently 0.1.6 on npm and 0.2.0 in the package.json to 0.3.0 since the changes are minor in the sense there are no breaking changes, just additional functionality via the browser extension. I ran npm version minor to do that. I'd suggest just running npm version x based on what you want to do in terms of npm versioning before publishing. I'm happy to add some more scripting, but I'm not sure much more is needed between npm version and the pre-publish-checks.js. Thoughts?

somewhatabstract · 2019-05-17T17:06:31Z

extension-config/popup.html

+    <img src="assets/icon-128.png" />
+    <a href="https://khan.github.io/tota11y" target="_blank" rel="noopener">tota11y</a>
+    <p>An accessibility visualization toolkit</p>
+    <label for="tota11y-toggler">Show tota11y<input id="tota11y-toggler" type="checkbox" /></label>


If this is already showing, should it say "Hide tota11y"? Or, just change it to Toggle tota11y?

Initially tota11y is not showing. I'll update the text to Toggle tota11y.

somewhatabstract · 2019-05-17T17:06:51Z

extension-config/popup.js

@@ -0,0 +1,63 @@
+function getActiveTab() {


Can you add a comment to the top of the file explaining the purpose of this code?

somewhatabstract · 2019-05-17T17:07:47Z

webpack.config.babel.js

+            to: "./",
+            ignore: [ ".eslintrc" ]
+        }
+        ])


Nice, is the extension different between prod and dev builds? Do we need to do anything special between dev and prod?

… can still run as a bookmarklet on it's own without any extension specific stuff attached to it.

nickytonline · 2021-04-24T14:07:09Z

Closing this as it does work, but needs some love to get it in the extension stores. If this is something you still want to pursue, feel free to reopen.

dineshdesigner08 · 2023-09-26T05:15:00Z

Hi, I have installed the Chrome extension of tota11y and when I try to check my website it's not working, Can some one please help me on this.

nickytonline · 2023-09-26T11:55:57Z

Hi @dineshdesigner08. This was never an official Chrome extension. It was something that I thought would be interesting to do and I also created this PR to show interest in Khan Academy when I applied there a long time ago.

With that said there's no support for this, but if you install the extension unpacked, it should work. Just follow the instructions in the README in the changed files in the PR.

dineshdesigner08 · 2023-09-26T12:19:49Z

was something that I thought would be interesting to do and I also created this PR

Thanks for the update @nickytonline, will follow the README file, Very much Appreciate

nickytonline · 2023-09-26T12:36:11Z

@dineshdesigner08, out of curiosity, how did you stumble upon my PR?

nickytonline mentioned this pull request Sep 15, 2018

tota11y as an extension, instead of a bookmarklet #62

Open

nickytonline force-pushed the poc/tota11y-as-chrome-extension branch 2 times, most recently from e918cff to c691341 Compare September 15, 2018 04:21

nickytonline force-pushed the poc/tota11y-as-chrome-extension branch from 20d3d7b to aa0760f Compare September 15, 2018 13:03

nickytonline changed the title ~~Poc/tota11y as Chrome extension~~ POC tota11y as Chrome extension/Firefox add-on Sep 15, 2018

somewhatabstract self-requested a review March 13, 2019 17:30

somewhatabstract reviewed Mar 15, 2019

View reviewed changes

nickytonline force-pushed the poc/tota11y-as-chrome-extension branch from e21995a to 6b88e21 Compare March 26, 2019 22:49

nickytonline commented Mar 26, 2019

View reviewed changes

nickytonline force-pushed the poc/tota11y-as-chrome-extension branch from 87a5d67 to 74c1492 Compare March 26, 2019 23:07

nickytonline commented Mar 26, 2019

View reviewed changes

nickytonline force-pushed the poc/tota11y-as-chrome-extension branch from dbcf319 to 5370393 Compare March 27, 2019 04:33

nickytonline commented Mar 27, 2019

View reviewed changes

nickytonline force-pushed the poc/tota11y-as-chrome-extension branch from f2254eb to 47dce9d Compare April 23, 2019 00:15

somewhatabstract reviewed May 17, 2019

View reviewed changes

nickytonline added 18 commits May 20, 2019 22:23

Added assets to generate extension.

56d7abd

Modified webpack config to be able to load unpacked Chrome extension.

4c1e80a

Added support for http sites.

fa1bf52

Added some documentation about loading unpacked Chrome extension.

952b5f9

Better icons.

57061d5

Added simple popup for info about tota11y.

1d91b42

Now you can toggle tota11y on/off.

002b019

Fixed eslint issue "chrome" is not defined.

c27f9b9

Seperated content script communication from t0ta11y script so that it…

d44edc5

… can still run as a bookmarklet on it's own without any extension specific stuff attached to it.

Added 24x24icon

1b89efd

Added instructions on how to load as a temporary Firefox add-on.

1f2fa0c

Little tweak so it looks good in Firefox as well.

dda4b5b

Now tota11y script loaded only when needed.

ac1ddbb

Fixed some bad grammar.

8cbe357

Fixed issue with checkbox in popup.

b98d81d

Created separate eslint config file for browser extension folder.

6341913

Now minified version of tota11y script loads in extension.

a9809a0

Added extension-config to lint dirs.

258dd40

nickytonline force-pushed the poc/tota11y-as-chrome-extension branch from 47dce9d to 258dd40 Compare May 21, 2019 02:28

nickytonline added 5 commits May 20, 2019 22:35

0.3.0

293439c

Added some comments.

85d0b14

Updated build command for building the unpacked extension.

1c9bf45

Changed some copy for the extension's popup menu.

27046f3

Added a comment about what the popup.js script is for.

9fe0725

nickytonline closed this Apr 24, 2021


		then in Chrome, enter `chrome://extensions` in the address bar to load the Chrome extensions page. At the top left of the Chrome extensions page, click the Load Unpacked button. From the file browser, select the `./build` folder and press the Select button to load the tota11y Chrome extension unpacked.

		## Loading tota11y as an temporary add-on in Firefox

		@@ -0,0 +1,40 @@
		function toggleTota11y(payload, sendResponse) {

POC tota11y as Chrome extension/Firefox add-on #131

POC tota11y as Chrome extension/Firefox add-on #131

Conversation

nickytonline commented Sep 15, 2018 • edited Loading

khanbot commented Sep 15, 2018

nickytonline commented Sep 15, 2018

khanbot commented Sep 15, 2018

nickytonline commented Sep 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

somewhatabstract commented Mar 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickytonline commented Mar 25, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickytonline Mar 26, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickytonline commented Mar 26, 2019 • edited Loading

nickytonline commented Mar 26, 2019

Choose a reason for hiding this comment

somewhatabstract commented Apr 22, 2019

somewhatabstract left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickytonline commented Apr 24, 2021

dineshdesigner08 commented Sep 26, 2023

nickytonline commented Sep 26, 2023 • edited Loading

dineshdesigner08 commented Sep 26, 2023

nickytonline commented Sep 26, 2023 • edited Loading

nickytonline commented Sep 15, 2018 •

edited

Loading

nickytonline Mar 26, 2019 •

edited

Loading

nickytonline commented Mar 26, 2019 •

edited

Loading

nickytonline commented Sep 26, 2023 •

edited

Loading

nickytonline commented Sep 26, 2023 •

edited

Loading