Upload a CSV file to an extension

[Juan Varvello]

the file and logged its content to the console. However, the extension crashes every time I upload the CSV. I've tried using a button, avoiding file inputs, and using different scripts, but I'm unsure of what else to attempt.

//hmtl

<button class="button2" type="file" id="uploadButton">Upload</button>

//popup.js

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

chrome.runtime.sendMessage({ action: "openFileChooser" }, (response) => {

if (response && response.success) {

console.log(response.data);

CSV = response.data;

document.location.href = url_array;

}

});

});

//content.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

if (request.action === "openFileChooser") {

var fileChooser = document.createElement("input");

fileChooser.type = 'file';

fileChooser.addEventListener('change', function (evt) {

var f = evt.target.files[0];

if (f) {

var reader = new FileReader();

reader.onload = function(e) {

var contents = e.target.result;

console.log(contents);

sendResponse({ success: true, data: contents });

}

reader.readAsText(f);

}

});

document.body.appendChild(fileChooser);

fileChooser.click();

}

return true;

});

[Patrick Kettner]

What is the error in chrome://extensions when it crashes?

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/87003bda-de2c-417b-89cb-adf0365ee801n%40chromium.org.

[Deco]

Your use of asynchronous calls here is incorrect, when you use sendResponse in an asynchronous callback (like the reader.onload), you need to indicate to the browser that the listener will respond asynchronously by returning true from the onMessage listener.
Try this fixed/improved content.js and see what happens:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "openFileChooser") {
    var fileChooser = document.createElement("input");
    fileChooser.type = 'file';
    fileChooser.addEventListener('change', function (evt) {
      var f = evt.target.files[0];
      if (f) {
        var reader = new FileReader();
        reader.onload = function (e) {
          var contents = e.target.result;
          console.log(contents);
          sendResponse({ success: true, data: contents });

          document.body.removeChild(fileChooser); // Clean up
        };
        reader.onerror = function (e) {
          console.error("Error reading file", e);
          sendResponse({ success: false, error: "Failed to read file" });
          document.body.removeChild(fileChooser); // Clean up

        };
        reader.readAsText(f);
      }
    });
    document.body.appendChild(fileChooser);
    fileChooser.click();
  }
  return true;
});

Thanks,
Deco 

--

[Juan Varvello]

HTML CODE:

<button class="button2" id="uploadButton">Upload</button>

POPUP.JS

const uploadButton = document.getElementById('uploadButton');

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

chrome.runtime.sendMessage({ action: "uploadCSV" }, (response) => {

if (response && response.success) {

console.log(response.data);

zoomInfoCSV = response.data;

}

});

});

CONTENT.JS

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

if (request.action === 'uploadCSV') {

handleUploadCSV(request, sendResponse);

return true; // ensure async response

}

});

function handleUploadCSV(request, sendResponse) {

var fileChooser = document.createElement("input");

fileChooser.type = 'file';

fileChooser.addEventListener('change', function (evt) {

var f = evt.target.files[0];

if (f) {

var reader = new FileReader();

reader.onload = function (e) {

var contents = e.target.result;

console.log(contents);

sendResponse({ success: true, data: contents });

document.body.removeChild(fileChooser); // Clean up

};

reader.onerror = function (e) {

console.error("Error reading file", e);

sendResponse({ success: false, error: "Failed to read file" });

document.body.removeChild(fileChooser); // Clean up

};

reader.readAsText(f);

}

});

document.body.appendChild(fileChooser);

fileChooser.click();

}

This is the error I am getting.

[Deco]

What is your manifest? 

You'll need to make sure that it's correctly injected:

{

  "manifest_version": 3,

  "name": "CSV Upload Extension",

  "version": "1.0",

  "permissions": [

    "activeTab",

    "scripting"

  ],

  "background": {

    "service_worker": "background.js"

  },

  "host_permissions": ["<all_urls>"],

  "content_scripts": [

    {

      "matches": ["<all_urls>"],

      "js": ["content.js"]

    }

  ],

  "action": {

    "default_popup": "popup.html"

  }

}

or something akin to that.

Thanks,

Deco

[Juan Varvello]

This is my manifest, I dont have background since I am not using it. Is it mandatory?

{

"manifest_version": 3,

"name": "RevOps Tools",

"version": "1.0",

"description": "Scrape contacts from Sales Navigator search results, adapt ZoomInfo csv for DevRev and more!",

"permissions": [

"activeTab",

"downloads",

"scripting",

"storage"

],

"host_permissions": [

"<all_urls>"

],

"action": {

"default_popup": "popup/popup.html",

"default_icon": {

"16": "images/icon16.png",

"48": "images/icon48.png",

"128": "images/icon128.png"

}

},

"content_scripts": [

{

"matches": ["<all_urls>"],

"js": ["scripts/content.js"]

}

],

"icons": {

"16": "images/icon16.png",

"48": "images/icon48.png",

"128": "images/icon128.png"

},

"web_accessible_resources": [

{

"resources": ["popup/users.json"],

"matches": ["<all_urls>"]

}

]

}

[al]

There's a few things going on here - 

In your popup script, since you're messaging a tab, use chrome.tabs.sendMessage(tabId, {message content}).

Because you're message a tab, you also need the tab Id. To get that, use chrome.tabs.query({active: true, other options here}) and grab the Id.

(Then send the message using the chrome.tabs API)

I'll note, I'm not sure how the file picker opens for you on the page, as (IIRC) it can't be programmatically opened (e.g. using something like .click())

You could move the file picker to your popup, since opening the picker won't close it (likely won't work on linux due to a bug).

Or you could create and open your own extension page using chrome.runtime.create(path to your upload page) and handle the logic within.

I suggest these as you'll likely find that when you click within the tab, the popup will close, and won't be able to parse the response. 

[al]

For reference - https://developer.chrome.com/docs/extensions/reference/api/tabs

Chrome.runtime.sendMessage is used to message the service worker and popup, among other things.