2

I am new to chrome extension writing, I tried to make a simple extension which try to control the speed of YouTube videos, but at the first phase of coding it i want to see the communication of this extension between background script(which send a message) and content script(which receive message).background successfully send message but content script doesn't receive it. why?

manifest.json:

{
    "manifest_version":2,
    "version":"1",
    "name":"youtube playback speed controller",
    "description":"this extention controll the playback speed of youtube vidz",
    "icons": {
        "128":"image/x.png",
        "64":"image/x.png",
        "16":"image/x.png"},
        "background":{
        "scripts":["background.js"],
        "persistent":false
    },
    "content_scripts": [
        {
            "matches": ["*://www.youtube.com/*"],
            "js" : ["content.js"]
        } 
    ],
    "page_action": {
        "default_icon": {
           "16": "image/x.png",
           "24": "image/x.png",
           "32": "image/x.png",
           "128": "image/x.png"
        },
        "default_title": "Youtube playback speed",
        "default_popup": "popup.html"
     },
     "commands": {
        "speedUp": {
          "suggested_key": {
            "windows": "Ctrl+Right",
              
              "linux": "Ctrl+Right"
          },
          "description": "speedup" 
        },
        "slowDown": {
          "suggested_key": {
            "windows": "Ctrl+Left",
            
              
              "linux": "Ctrl+Left"
            
          },
          "description": "slow down" 
        }
       
      },
    
    
     "permissions":[
        "tabs",
        "https://www.youtube.com/*"
    ]
}

background.js:

var playbackspeed = 0.5;
function speedhandler(command) {
    if(command=='speedUp')
    {
        playbackspeed +=0.1;    
    } else if (command=='slowDown') {
        playbackspeed -=0.1;
    }
}

chrome.commands.onCommand.addListener(function(command) {
    speedhandler(command)
    if (playbackspeed > 1 | playbackspeed < 0)
    { 
        alert('your desired playback speed is not in normal range');
        playbackspeed = 0.5;
    }
      
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {  
        chrome.tabs.sendMessage(tabs[0].id, { x: 'changeit' },function() {
            alert('message sent')
        })
    })        
});

content.js:

chrome.runtime.onMessage.addListener(function(responsew, call, sendresponse) {
    alert('on message fired')
    if(responsew.x == 'changeit')
    {
        alert('message matches')
    }
})
Pipetus
  • 1,068
  • 1
  • 11
  • 28
moein
  • 21
  • 2
  • I guess you didn't reload the youtube tab after editing/reloading your extension because the code is fine. You may want to switch to [programmatic injection](https://stackoverflow.com/a/4532567) or reinject the content script explicitly on update ([example](https://stackoverflow.com/q/10994324)). The only problem is that your playbackspeed will be reset every time the background script sleeps so you need to use `chrome.storage` instead. – wOxxOm Jul 29 '20 at 05:40
  • when background.js sleeps? – moein Jul 29 '20 at 07:37
  • See the [documentation](https://developer.chrome.com/extensions/background_pages). – wOxxOm Jul 29 '20 at 08:18

1 Answers1

-1

Try This:

manifest.json

{
  "manifest_version": 2,
  "version": "1",
  "name": "youtube playback speed controller",
  "description": "this extention controll the playback speed of youtube vidz",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [
        "*://www.youtube.com/*"
      ],
      "js": [
        "content.js"
      ]
    }
  ],
  "commands": {
    "speedUp": {
      "suggested_key": {
        "windows": "Ctrl+Right",
        "linux": "Ctrl+Right"
      },
      "description": "speedup"
    },
    "slowDown": {
      "suggested_key": {
        "windows": "Ctrl+Left",
        "linux": "Ctrl+Left"
      },
      "description": "slow down"
    }
  },
  "permissions": [
    "tabs",
    "https://www.youtube.com/*"
  ]
}

background.js

var playbackspeed = 0.5;
function speedhandler(command) {
    if (command == 'speedUp') {
        playbackspeed += 0.1;
    } else if (command == 'slowDown') {
        playbackspeed -= 0.1;
    }
}
chrome.commands.onCommand.addListener(function (command) {
    speedhandler(command);
    if (playbackspeed > 1 | playbackspeed < 0) {
        alert('your desired playback speed is not in normal range');
        playbackspeed = 0.5;
    }
    chrome.tabs.query({ active: true, currentWindow: true }, (tab) => {
        chrome.tabs.sendMessage(tab[0].id, { msg: "changeit" }, (response) => {
        })
    });
});

content.js


console.log("inside content js")
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.msg == "changeit") {
            alert("command pressed")
            sendResponse({ response: "success" });
            return true;
        }
    });
Noob dev
  • 134
  • 6
  • Posting code-only answers is discouraged on StackOverflow without at least a few words explaining what the problem was in your opinion and what was done to fix it. – wOxxOm Jul 29 '20 at 05:39