0

I'm trying to develop an grammar check Google Chrome Extension using grammar check API (https://textgears.com/api/). A sample piece of JSON that is returned is https://api.textgears.com/check.php?text=I+is+an+engeneer!&key=DEMO_KEY

But, the message sent by the event page is not being detected the content script and it doesn't get executed.

Aim of the extension: When the user selects a particular text on the page and clicks on the context menu, a div element will be displayed on the top right column indicating errors and suggestions if any.

manifest.json :

{
    "manifest_version": 2,
    "name": "GrammarCheck",
    "version": "1.0",
    "description": "To check grammar and style of the text",

    "page_action": {
        "default_title": "Check",
        "default_popup": "popup.html"
    },

    "permissions": [
    "tabs",
    "contextMenus"],

    "content_scripts":[
    {
    "matches": ["*://*/*"],
    "js": ["content.js"],
    "css": ["content.css"]
    }],

    "background": {
    "scripts": ["event.js"],
    "persistent": false
  }
}

event.js:

var menu={
    id: "grammar",
    title: "Check Grammar",
    contexts: ["selection"]
}
var num, text;
chrome.contextMenus.create(menu);
chrome.contextMenus.onClicked.addListener(function(click){
    if(click.menuItemId=="grammar" && click.selectionText){
    var url="https://api.textgears.com/check.php?text="+encodeURIComponent(click.selectionText)+"&key=RxOg8C2AsuPygXPN";
    var Httpreq = new XMLHttpRequest(); 
    Httpreq.open("GET",url,false);
    Httpreq.send(null);
    var json_obj = JSON.parse(Httpreq.responseText);
    console.log(json_obj);//json_obj also has the appropriate parameters.
    if(json_obj.result)
    {   chrome.tabs.query({
        currentWindow:true,
        active: true
        }, function(tab){
        console.log("suggest");//suggest gets printed correctly
        tabID=tab[0].id;
        chrome.tabs.sendMessage(tabID,{
        method: "suggest",
        content: JSON.stringify(json_obj)
        });
        });
    }
    else 
    {   
        chrome.tabs.query({
        currentWindow:true,
        active: true
        }, function(tab){
        console.log("error");
        tabID=tab[0].id;
        chrome.tabs.sendMessage(tabID,{
        method: "error",
        content: JSON.stringify(json_obj)
        });
        });
    }
    }
});

content.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    console.log("Entered Content Script");//This is not being printed
    //other statements
});
Benedict
  • 360
  • 1
  • 6
  • 15
  • 1
    0. Debug the [background page](https://stackoverflow.com/a/10258029) and the [content script](https://stackoverflow.com/a/21734890) (use breakpoints) 1. I'm not sure synchronous XHR is still supported by modern browsers, it's not needed here anyway: rework your code to use async callback 2. onClicked listener can have a second param `tab` which you can use to get the id instead of tabs.query that fails if you debug the background page in devtools as its window will be current. 3. No need to stringify messages: simple objects are transferrable as is. – wOxxOm Jul 18 '17 at 18:30
  • If your user interaction *begins* with the user clicking a browser/page action button or `contextMenus` entry, then the content script (CS) should be injected with [`chrome.tabs.executeScript()`](https://developer.chrome.com/extensions/tabs#method-executeScript) instead of a *manifest.json* `content_script` entry, so your CS does not burden the browser by being injected into every page just to wait to be used. Using `chrome.tabs.executeScript()`, the CS can begin functioning when it is injected with [the data, if any, that's been passed to it](http://stackoverflow.com/a/40815514/3773011). – Makyen Jul 19 '17 at 07:45

0 Answers0