+ 
+
+
+ Mona's Markdown A11y
+Get feedback on the Markdown you're writing in GitHub
+ +
@@ -37,10 +37,9 @@ This extension will only run on GitHub domain and does the following on all mark
-
### Customization note
-The styling I've set may not be suitable for all users. Feel free to customize these however you like when you download these files.
+The styling I've set may not be suitable for all users. Feel free to customize these however you like when you download these files.
You can do this by modifying `styles.css`. There are CSS variables at the top which you may set to your preference. For example, you may choose to set a different color for each heading level or remove the border. If you'd prefer the headings to be positioned at the front, follow the notes in `contentScript.js`. Once changes are made, `Update` on `chrome://extensions/` so changes are reflected in the extension.
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..24d5e76
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: [["@babel/preset-env", { targets: { node: "current" } }]],
+};
diff --git a/devtools-feedback/content-listener.js b/devtools-feedback/content-listener.js
new file mode 100644
index 0000000..e69de29
diff --git a/devtools-feedback/contentScript.js b/devtools-feedback/contentScript.js
new file mode 100644
index 0000000..f353956
--- /dev/null
+++ b/devtools-feedback/contentScript.js
@@ -0,0 +1,53 @@
+const getType = (element) => {
+ if (
+ element.tagName === "TEXTAREA" &&
+ element.getAttribute("name").includes("comment")
+ ) {
+ return "comment";
+ }
+
+ if (
+ element.tagName === "TEXTAREA" &&
+ element.getAttribute("name").includes("issue")
+ ) {
+ return "issue";
+ }
+};
+
+chrome.runtime.onConnect.addListener(function (port) {
+ port.onMessage.addListener(function (msg) {
+ if (msg.request === "getTextAreas") {
+ const markdownTextAreas =
+ Array.from(document.querySelectorAll("textArea")) || [];
+ const results = [];
+
+ const codeMirrors = Array.from(document.querySelectorAll(".CodeMirror"));
+ [...markdownTextAreas, ...codeMirrors].forEach((textArea) => {
+ // ensure that textArea is not hidden and that the user has typed in a value
+ if (textArea.clientWidth && textArea.value) {
+ results.push({
+ textAreaOutput: textArea.value,
+ type: getType(textArea),
+ id: textArea.id,
+ });
+ }
+ });
+
+ port.postMessage({ results: results });
+ } else if (msg.request === "focusComponent") {
+ (
+ Array.from(document.getElementsByClassName("github-a11y-highlight")) ||
+ []
+ ).forEach((element) => {
+ element.classList.remove("github-a11y-highlight");
+ });
+
+ const textArea = document.getElementById(msg.id);
+ if (textArea) {
+ textArea.classList.add("github-a11y-highlight");
+ textArea.focus();
+ textArea.scrollIntoView();
+ }
+ }
+ });
+});
diff --git a/devtools-feedback/contentScriptStyles.css b/devtools-feedback/contentScriptStyles.css
new file mode 100644
index 0000000..52ba495
--- /dev/null
+++ b/devtools-feedback/contentScriptStyles.css
@@ -0,0 +1,3 @@
+.github-a11y-highlight {
+ border: 4px solid #58a6ff !important;
+}
diff --git a/devtools-feedback/devtools.html b/devtools-feedback/devtools.html
new file mode 100644
index 0000000..19baf44
--- /dev/null
+++ b/devtools-feedback/devtools.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+ Get feedback on the Markdown you're writing in GitHub
+ +