vendredi 24 avril 2020

Chrome Extention error "Attempting to use a disconnected port object"

Im writing a Chrome Extension wich can copy certain parts of a page and send it to my server.

As of yesterday my code was working just fine, but today as i continued to code i instantly got the error message stated in the title.

My login.js file sends the value of the form-fields to the background.js file wich handels where the data has to go.

login.js

document.addEventListener('DOMContentLoaded', function() {
    if ($.cookie('token')){
      window.location.href = "../templates/work_selection.html";
    }
    var checkPageButton = document.getElementById('loginbtn');
    checkPageButton.addEventListener('click', function() {     
      var login_data = `{"username":"${document.getElementById('email').value}", "password" : "${document.getElementById('password').value}", "expireTime" : "5000" }`
      var login_json = JSON.stringify(login_data)
      var jwt_msg = chrome.runtime.connect({name:'login_msg'});
      jwt_msg.postMessage({login_data:login_json});
      jwt_msg.onMessage.addListener(function(msg) {
        console.log(msg)
        if(msg.token){
          window.location.href = "../templates/work_selection.html";
        }
        if(msg.message){
          $('#login-error').append(msg.message);
        }
      });
    }, false);
  }, false);

Every thing runs as excepted up to the point where i try to post back the data my server responds with.

the error happens in if(recieved_data.name === 'login_msg')

this is my background.js file

chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
      id: 'quote',
      title: 'Create quote',
      contexts: ['selection']  
    });
    chrome.contextMenus.create({
        id: 'source',
        title: 'Create source',
        contexts: ['page']  
      });
  });

  chrome.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === 'quote') {
      chrome.tabs.sendMessage(tab.id, { text: 'quote' }, (res) => {
      });
    }
    if (info.menuItemId === 'source') {
        chrome.tabs.sendMessage(tab.id, { text: 'source' }, (res) => {
        });
      }
  });

  chrome.runtime.onConnect.addListener(function(recieved_data){
      if(recieved_data.name === 'create_quote'){
        recieved_data.onMessage.addListener(function(msg){
          sendQuote(d=msg.quote).done(function(data){
            recieved_data.postMessage(data);
           });
      });}
      if(recieved_data.name === 'create_source'){
        recieved_data.onMessage.addListener(function(msg){
          sendQuote(d=msg.source).done(function(data){
            get_selected_work()
            recieved_data.postMessage(data);
           });
        });
      }
      if(recieved_data.name === 'login_msg'){
        var date = new Date();
        recieved_data.onMessage.addListener(function(msg){
          date.setTime(date.getTime() + 86340000);  
          logIn(d=msg.login_data).done(function(data){
            $.cookie("token", data.token, {expires:date})
            jwt_token = data.token;
            recieved_data.postMessage(data);
           }).fail(function(data){
            recieved_data.postMessage(data);
           });
          return true
        });
      }
      if(recieved_data.name === 'get_works'){
        recieved_data.onMessage.addListener(function(msg){
          get_work().done(function(data){
            recieved_data.postMessage(data);
           });
        });
      };
  });

and my requests.js file

var jwt_token;

function logIn(d){
  return $.get({
    url:'http://127.0.0.1:5000/login',
    type:'POST',
    data: d,
    headers:{"Content-Type":"application/json"},
    dataType: "json"
  })
};

function sendQuote(d){
  return $.get({
      url:'http://127.0.0.1:5000/snippet',
      type:'POST',
      data: d,
      headers:{"Content-Type":"application/json","authorization": `${$.cookie('token')}`, "workUuid":`${$.cookie('work_selection')}`},
      dataType: "json"
    })
};

function sendSource(d){
  return $.get({
    url:'http://127.0.0.1:5000/snippet',
    type:'POST',
    data: d,
    headers:{"Content-Type":"application/json","authorization": `${$.cookie('token')}`},
    dataType: "json"
  })
}; 

function get_work(){
return $.get({
  url:'http://127.0.0.1:5000/work',
  type:'GET',
  headers:{"Content-Type":"application/json", "authorization": `${$.cookie('token')}`},
  dataType: "json"
})
}; 

What am i missing ?

I already tried "return true" because of the ajax request. But it does not help.

Changing the Port name and so on does nothing.

Every other Port runs fine and postMessage does post the JSON data as intended.




Aucun commentaire:

Enregistrer un commentaire