Fammy / BarcodeExtension

Google Chrome extension for generating barcodes
2 stars 0 forks source link

hello, can you enhance the user experience? #1

Open ReZeroS opened 1 year ago

ReZeroS commented 1 year ago

It's so cool and worked well, but can you enhance the user experience? Here is my requirements:

I wanna generate the image by select the barcode text and then right click, the screen will print the image(cloud in a small window), since there is a lot of type of codes, I wanna you can provide a setting to change the default type, so I will not need to ensure the type every time generated click.

Fammy commented 1 year ago

Hi, thanks for your feedback!

I did this extension many years ago in my free time to help me create barcodes at work.

I will check if it is difficult to add the ability to create barcodes from right click.

It may take me a long time to get around to checking.

ReZeroS commented 1 year ago

I have chatted with gpt and solved my problem, here is the code but with manifest v2. It use offline js so response quickly and could worked on offline environment, hope can help you.

https://lindell.me/JsBarcode/

{
  "manifest_version": 2,
  "name": "barcode generator",
  "version": "1.0",
  "description": "一个简易的条形码生成器 Chrome 插件。",
  "permissions": ["contextMenus"],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["JsBarcode.all.min.js", "content.js"]
    }
  ],
  "web_accessible_resources": [
    "JsBarcode.all.min.js"
  ],
  "icons": {
    "48": "icon.png"
  }
}
background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "generateBarcode",
    title: "生成条形码",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "generateBarcode") {
    chrome.tabs.sendMessage(tab.id, {
      action: "generateBarcode",
      selection: info.selectionText,
      x: info.pageX,
      y: info.pageY
    });
  }
});

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.sendMessage(tab.id, { action: "openBarcodeDialog" });
});
content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "generateBarcode") {
      const script = document.createElement("script");
      script.src = chrome.runtime.getURL("JsBarcode.all.min.js");
      script.onload = () => {
        const selection = request.selection;
        const canvas = document.createElement("canvas");
        const body = document.getElementsByTagName("body")[0];

        JsBarcode(canvas, selection, { format: "CODE128", displayValue: false });
        canvas.style.position = "fixed";
        canvas.style.top = "10px";
        canvas.style.right = "10px";
        canvas.style.zIndex = 9999;
        body.appendChild(canvas);

        setTimeout(() => {
          body.removeChild(canvas);
        }, 5000);
      };
      document.body.appendChild(script);
    }
  });