How to modify already injected JS file?

Question

I'm in the process of creating a page_action chrome extension. My content page injects my script.js file into the html page. Users can modify parameters of the chrome extension by using the popup.html page. When the user saves the parameters, popup.js saves those parameters to local storage and sends a copy of them to my content.js file where I need to send them to my script.js file to update some variables.

I've tried using chrome API's to access storage or send messages to script.js from content.js but that doesn't work. And I've tried calling a script.js function from content.js and that doesn't work either.

My last conceivable option is to remove the injected script.js. Modify the file and re-inject the updated version. Even if that's possible it seems like a bad practice. What other options do I have?

My manifest file

 {
  "manifest_version": 2,
  "name": "Agar",
  "version": "1.0.0",
  "icons":{
     "128": "icon128.png",
     "48": "icon48.png",
     "16": "icon16.png"
  },

  "page_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
  },

  "background": {
    "scripts" : ["jquery-3.2.1.js", "eventPage.js"],
    "persistent": false
  },

  "content_scripts": [
    {
      "matches": ["http://agar.io/*"],
      "js": ["jquery-3.2.1.js", "content.js"]
    }
  ],

  "permissions": [
    "tabs",
    "http://agar.io/*",
    "storage"
    ],

  "web_accessible_resources": ["script.js"]
}

My content.js file

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');

s.onload = function() {
    this.remove();
};

(document.head || document.documentElement).appendChild(s);

//receives all the parameters saved by the user
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
    //send request.parameters to script.js
});