0

I'm very new to javascript, JQuery, AJAX and chrome plugins, I've done a lot of searching but I'm still stuck. Trying to build a chrome plugin which intercepts the response of a particular AJAX request and modifies it slightly.

The AJAX response inserts a table into the page, I want to modify a particular element of that table to contain something different, so that when the table is updated, instead of "Bob's Burgers" it will say "Bill's Burgers".

What I've tried so far: I know how to make basic plugins and searching around I found this code:

  jQuery.ajaxSetup({
        dataFilter: function (data, type) {
            //modify the data

            return data;
        }
    });

from this answer: How can I intercept ajax responses in jQuery before the event handler?

However that answer is from 2011, on the JQuery website they talk about a ajax prefilters (http://api.jquery.com/jQuery.ajaxPrefilter/), should I be using that instead?

And lastly, how would my manifest file change? Should the changes be inside the content script or a background script?

Any guidance on this would be greatly appreciated.

manifest.json

{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "manifest_version": 2,
  "name": "extensiontest",
  "version": "0.2",
  "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery-3.2.1.min.js","content.js"]
  }
],
"browser_action": {
  "default_icon": "icon.png",
    "default_popup":"popup.html"
}

}

content.js

chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        if( request.message === "start" ) {

                    $( document ).ajaxSuccess(function( event, xhr, settings ) { console.log(event); console.log(xhr); console.log(settings); });

             }
      }
    );

popup.js

$(document).ready(function(){
    $('body').on('click', '#button1', function(){
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
   });
});
});

popup.html

<!DOCTYPE html>
<html>

<head>
<script src = "jquery-3.2.1.min.js"></script>
<script src="popup.js"></script>
</head>

<body>
<input id="button1" type=button value=clickme></input>
</body>

</html>
Sentinel
  • 441
  • 1
  • 6
  • 25
  • 1
    Sorry but I didn't get you. You want to create a plugin for dynamically changing responses on the fly right? Or do you want to change dynamically the requests? Or just to update that table after you get the result? – quirimmo May 15 '17 at 21:43
  • I just want to update the table but there's no table when the website is first loaded. After the ajax response is complete, then there's a table but I can't access it. So I thought I would intercept and modify the ajax *response* before it shows the table. – Sentinel May 15 '17 at 21:48
  • $( document ).ajaxSuccess(function( event, xhr, settings ) { console.log(event); console.log(xhr); console.log(settings); }); – quirimmo May 15 '17 at 21:54
  • If you atttach the code above to your page, is your request correctly printed? – quirimmo May 15 '17 at 21:54
  • @quirimmo I'm not sure if I implemented it correctly but I don't see anything in the console, I updated my original question to include all the plugin code, I made the modification inside content.js. The way the plugin works right now is that after clicking on the plugin icon, a small button appears that says clickme, after clicking on that, it then goes to content.js. I set it up this way so I could activate content.js when the table appears. – Sentinel May 15 '17 at 22:27
  • Try to move it outside all the block. Putting it inside the block should activate the code only when you start an ajax request – quirimmo May 15 '17 at 23:56

0 Answers0