如何在Chrome扩展上使用库

tkclm6bt  于 2023-05-04  发布在  Go
关注(0)|答案(1)|浏览(133)

我已经尝试了10h来实现这一点,我不能让它工作script.js

// Create a button element
const button = document.createElement('button');
button.textContent = 'copy';

button.addEventListener('click', () => {

    if(document.getElementsByClassName("product-barcode")){
        const makats = document.getElementsByClassName("product-barcode");
        var makatstring = [];
        for (let i = 0; i < makats.length; i++) {
            makatstring[i] = makats[i].innerText.split(':')[1];
            
        }       
    }
    makatstring = makatstring.join('\n');
    alert(makatstring)

  navigator.clipboard.writeText(makatstring);
});

//button.addEventListener("mouseover", function() {
//  button.style.backgroundColor = "#f79e55";
//});

//button.addEventListener("mouseout", function() {
//  button.style.backgroundColor = "#f58221";
//});
const myDiv = document.querySelector(".topText");



button.style.fontSize = "20px";
button.style.backgroundColor = "#f58221";
button.style.color = "white";


myDiv.appendChild(button);

document.addEventListener("DOMContentLoaded", function(event) {
  const locetion = document.querySelector("#app > div:nth-child(1) > div.row > div.col-12.col-md-4 > div.pull-left.d-none.d-md-block");
  var div = document.createElement('div'); 
  div.innerHTML = '<input type="search" id="mySearch" placeholder="Search for something..">';

  let btn = document.createElement("button");
  btn.onclick = function () {
    alert("Button is clicked");
  };
  btn.innerHTML = "Save";
  btn.setAttribute('id','123123')
  locetion.append(div);
  locetion.append(btn);
});

document.addEventListener("DOMContentLoaded", function(event) {
  const locetionbarcod = document.querySelector("#site-wrappah > div > div.topText");
  var divqrcode = document.createElement('div'); 
  divqrcode.innerHTML = '<svg id="barcode"></svg>';
  //locetionbarcod.append(divqrcode);
  jsBarcode("#barcode", "Hi world!");
  document.body.appendChild(divqrcode)
  generatecode();
});

function generatecode(){
    alert("func work");
}

manifest.json

{
    "name": "tempname", 
    "description": "tempname", 
    "version": "1.0",
    "manifest_version": 3, 
    "permissions": ["storage", "activeTab", "contextMenus"],
    "content_security_policy": "script-src 'self'",

    "background": {
        "service_worker": "barcoddjs.js"
    },

    "action": {
        "default_popup": "popup.html"
    }, 
    "content_scripts": [
        {
            "matches": ["https://www.ivory.co.il/*"],
            "js": ["script.js", "barcoddjs.js"]
        }
    ],
    "web_accessible_resources":[
    {
      "resources": ["barcoddjs.js"],
      "matches": [ "https://www.ivory.co.il/*" ]
    }]
    
}

barcoddjs.js是用于条形码的JsBarcode库(只需将其重命名为idk why)
4天,我试图注入条形码到网站的html,所以当用户打印提供的东西,将有简单的方法来转移它的计算机
ps如果你有改进的代码,这将是伟大的

lc8prwob

lc8prwob1#

下面是一个在内容脚本中使用JsBarcode的示例。

manifest.json

{
  "manifest_version": 3,
  "name": "hoge",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "JsBarcode.all.min.js",
        "content.js"
      ]
    }
  ]
}

content.js

const img = document.createElement("img");
img.id = "barcode";

const button = document.createElement("button");
button.innerText = "button";

button.onclick = () => {
  JsBarcode("#barcode", "Hi!");
}

document.body.insertBefore(button, document.body.children[0]);
document.body.insertBefore(img, document.body.children[0]);

相关问题