Add Option to format via context menu

README.md

@@ -67,6 +67,11 @@ yarn fix
 yarn test
 ```
 
+### Known Issues
+
+- Formatting via context menu is supported in firefox only
+- Elements present inside iframe can't be formatted
+
 ## Help
 
 We need your [help](https://github.com/prettier/prettier-chrome-extension/issues) :)

package.json

@@ -56,6 +56,7 @@
     "sass": "1.26.10",
     "sass-loader": "9.0.3",
     "style-loader": "1.2.1",
+    "web-ext": "4.3.0",
     "webextension-polyfill": "0.6.0",
     "webpack": "4.44.1",
     "webpack-cli": "3.3.12"

src/background/context-menu.js

@@ -0,0 +1,38 @@
+import browser from "webextension-polyfill";
+
+const menuItemId = "prettier-format";
+
+const handleContextMenuClick = async (info, tab) => {
+  await browser.tabs.executeScript(tab.id, {
+    code: `
+      browser.menus.getTargetElement(${info.targetElementId}).classList.add('${CLASS_NAME}')
+    `,
+    frameId: info.frameId,
+  });
+  await browser.tabs.sendMessage(tab.id, "prettierFormat");
+};
+
+const CLASS_NAME = "__PRETTIER_EXTENSION_FORMAT_ELEMENET__";
+
+const menuItem = {
+  contexts: ["editable"],
+  id: menuItemId,
+  title: "Format with prettier",
+};
+
+const init = async () => {
+  try {
+    await browser.menus.removeAll();
+    browser.menus.create(menuItem);
+
+    browser.menus.onClicked.addListener((info, tab) => {
+      if (info.menuItemId == menuItemId) {
+        handleContextMenuClick(info, tab);
+      }
+    });
+  } catch (err) {
+    console.log("Error while initializing context menu", err);
+  }
+};
+
+init();

src/background/index.js

@@ -0,0 +1 @@
+import "./context-menu";

src/content/context-menu.js

@@ -0,0 +1,30 @@
+import browser from "webextension-polyfill";
+
+import Storage from "./storage";
+import format from "../utils/format";
+
+const storage = new Storage();
+const CLASS_NAME = "__PRETTIER_EXTENSION_FORMAT_ELEMENET__";
+
+const formatCode = async () => {
+  const inputEl = document.getElementsByClassName(CLASS_NAME)[0];
+  if (!inputEl) {
+    return;
+  }
+
+  const options = {
+    parser: "markdown",
+    ...storage.get().prettierOptions,
+  };
+
+  const formattedText = format(inputEl.value, options);
+  inputEl.value = formattedText;
+
+  inputEl.classList.remove(CLASS_NAME);
+};
+
+browser.runtime.onMessage.addListener((request) => {
+  if (request === "prettierFormat") {
+    return formatCode();
+  }
+});

src/content/github.js

@@ -4,8 +4,7 @@ import renderButton, {
   BUTTONS_TO_SEARCH_FOR,
   COMMENT_SIBLING_SELECTORS_TO_DEFER_TO,
 } from "./button";
-import { PARSERS } from "./parsers";
-import prettier from "prettier/standalone";
+import format from "../utils/format";
 
 const GITHUB_URL = "https://github.com";
 const GITHUB_VALID_PATHNAMES = /^\/.*\/.*\/(?:pull\/\d+(?:\/?|\/files\/?)$|commits?\/.*|compare\/.*|issues\/\d+|issues|wiki|wiki\/\d+\/(_?new|_edit))/u;
@@ -119,9 +118,8 @@ export default class GitHub {
 
       prettierButton.addEventListener("click", (event) => {
         event.preventDefault();
-        inputEl.value = prettier.format(inputEl.value, {
+        inputEl.value = format(inputEl.value, {
           parser: "markdown",
-          plugins: PARSERS,
           ...this._storage.get().prettierOptions,
         });
         inputEl.focus();

src/content/leetCode.js

@@ -1,5 +1,5 @@
-import { PARSERS, PARSERS_LANG_MAP } from "./parsers";
-import prettier from "prettier/standalone";
+import { PARSERS_LANG_MAP } from "../utils/parsers";
+import format from "../utils/format";
 import renderButton from "./button";
 
 const LEETCODE_URL = "https://leetcode.com";
@@ -118,9 +118,8 @@ export default class LeetCode {
     document.addEventListener("FormatEditorContent", (event) => {
       const snippet = event.detail;
 
-      const formattedSnippet = prettier.format(snippet, {
+      const formattedSnippet = format(snippet, {
         parser: PARSERS_LANG_MAP.js,
-        plugins: PARSERS,
         ...this._getOptions(),
       });
 

src/content/stackOverflow.js

@@ -1,5 +1,5 @@
-import { PARSERS, PARSERS_LANG_MAP } from "./parsers";
-import prettier from "prettier/standalone";
+import { PARSERS_LANG_MAP } from "../utils/parsers";
+import format from "../utils/format";
 import renderButton from "./button";
 
 const STACKEXCHANGE_SITES = [
@@ -187,9 +187,8 @@ export default class StackOverflow {
                 let formattedSnippet = snippet;
 
                 try {
-                  formattedSnippet = prettier.format(snippet, {
+                  formattedSnippet = format(snippet, {
                     parser: PARSERS_LANG_MAP[lang],
-                    plugins: PARSERS,
                     ...this._getOptions(),
                   });
                 } catch {}
@@ -216,9 +215,8 @@ export default class StackOverflow {
             }
 
             try {
-              formattedText = prettier.format(codeLines.join("\n"), {
+              formattedText = format(codeLines.join("\n"), {
                 parser: PARSERS_LANG_MAP[lang],
-                plugins: PARSERS,
                 ...this._getOptions(),
               });
             } catch {
@@ -248,9 +246,8 @@ export default class StackOverflow {
         });
       }
 
-      inputEl.value = prettier.format(inputEl.value, {
+      inputEl.value = format(inputEl.value, {
         parser: "markdown",
-        plugins: PARSERS,
         ...this._getOptions(),
       });
       inputEl.focus();

src/dev-manifest.json

@@ -0,0 +1,3 @@
+{
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+}

src/firefox-manifest.json

@@ -4,5 +4,31 @@
       "id": "@prettier",
       "strict_min_version": "54.0"
     }
-  }
+  },
+  "permissions": ["storage", "menus", "activeTab"],
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://stackoverflow.com/*",
+        "https://askubuntu.com/*",
+        "https://mathoverflow.com/*",
+        "https://serverfault.com/*",
+        "https://stackapps.com/*",
+        "https://superuser.com/*",
+        "https://*.stackexchange.com/*",
+        "https://github.com/*",
+        "https://leetcode.com/*"
+      ],
+      "js": ["content.js"],
+      "run_at": "document_end"
+    },
+    {
+      "matches": ["<all_urls>"],
+      "js": ["context-menu.js"],
+      "run_at": "document_end"
+    }
+  ]
 }

src/prod-manifest.json

@@ -0,0 +1,3 @@
+{
+  "content_security_policy": "script-src 'self'; object-src 'self'"
+}

src/utils/format.js

@@ -0,0 +1,15 @@
+import prettier from "prettier/standalone";
+
+import { PARSERS } from "./parsers";
+
+const format = (text, options = {}) => {
+  const formattedText = prettier.format(text, {
+    parser: "markdown",
+    plugins: PARSERS,
+    ...options,
+  });
+
+  return formattedText;
+};
+
+export default format;

webpack.config.js

@@ -17,10 +17,12 @@ module.exports = ({ outDir, env }) => {
   return {
     devtool: false,
     entry: {
-      content: "./src/content/index.js",
+      background: "./src/background",
+      content: "./src/content",
+      "context-menu": "./src/content/context-menu",
       options: isDevMode
-        ? ["react-devtools", "./src/options/index.js"]
-        : "./src/options/index.js",
+        ? ["react-devtools", "./src/options"]
+        : "./src/options",
     },
     mode: env,
     module: {
@@ -87,6 +89,7 @@ module.exports = ({ outDir, env }) => {
             files: [
               "src/manifest.json",
               isFirefox && "src/firefox-manifest.json",
+              `src/${isDevMode ? "dev" : "prod"}-manifest.json`,
             ].filter(Boolean),
             to: "manifest.json",
           },