0

I am new to making extensions.

For my content script I'm using content.js and for my background script I'm using background.js.

I want it so while my extension runs in the background in google chrome it prints "Hello" when you click "Shift" while on a specific web page.

Current script without extension:

$(document).keydown(function(e) {
    if (e.keyCode == 16) { 
        if (window.location.href == "https://www.google.com") {
            console.log("Hello");
        } else {
            console.log("Go to https://www.google.com");
        }
        console.log("Shift Pressed");
        return false;
    }
})
Oliver
  • 11
  • 4
  • `location.href` doesn't need to be accessed through `window`. What exactly is the problem you're having? – Pyromonk Jun 01 '17 at 11:06
  • Not sure where to start :L I want it so if you click shift on google.com that it console.log("Hello") – Oliver Jun 01 '17 at 11:11
  • You are using jQuery. Is jQuery loaded by your extension? – Pyromonk Jun 01 '17 at 11:12
  • Yeah (jQuery is loaded by my extention). The thing is, I'm not really sure where to put this script, like what file and what I need to put in it to activate it, I've never really made extensions before. – Oliver Jun 01 '17 at 11:17
  • Have you read [the manual](https://developer.chrome.com/extensions/getstarted)? – Pyromonk Jun 01 '17 at 11:21
  • Yeah, just confused of where I should put this. – Oliver Jun 01 '17 at 11:28
  • Normally you would create a script.js file with your code and then [update manifest.json accordingly](https://stackoverflow.com/questions/9515704/insert-code-into-the-page-context-using-a-content-script) (`'content_scripts': [{'js' : ['myScript.js']}]`). – Pyromonk Jun 01 '17 at 11:37
  • Yeah, I got that in my manifest.json. – Oliver Jun 01 '17 at 11:38
  • And you have seen [this reference](https://developer.chrome.com/extensions/content_scripts)? If that's the case, I am not sure what exactly your problem might be. Do you have myScript.js in your extension's root directory? – Pyromonk Jun 01 '17 at 11:41
  • Thanks and yeah, I'll try to figure it out on my own, I'll reply if I have any struggles :P – Oliver Jun 01 '17 at 11:45
  • I'm sorry I wasn't able to help, but without knowing your setup it's hard to be specific. – Pyromonk Jun 01 '17 at 11:47
  • so far i have this: manifest.json: `{ "manifest_version": 2, "name": "Supreme Autofill Bot", "version": "1.0", "content_scripts": [ { "matches": [ "https://www.supremenewyork.com/*" ], "js": ["jquery-3.2.1.min.js", "content.js"] } ], "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "icons": { "128": "icon.png" }, "permissions": [ "https://www.supremenewyork.com/*" ], "background": { "scripts": ["background.js"] } }` but i am not sure where i should put my script. – Oliver Jun 01 '17 at 18:11
  • Your script should be in the same directory as manifest.json – Pyromonk Jun 01 '17 at 22:01
  • `while my extension runs in the background` and `Current script without extension` make no sense. Your extension architecture is represented by two separate parts currently: the content script that runs alongside the web page and that can access the web page and its DOM events like `keydown`, and a background page that is a separate hidden page with its own `document` and `window`, not related to the web page or content script. – wOxxOm Jun 02 '17 at 10:32
  • Also, you need to start using devtools debugger properly: you can debug your content script and the background page and step through the code, inspect variables, see what happens instead of blindly guessing and being confused. – wOxxOm Jun 02 '17 at 10:34

1 Answers1

1

You can add content script with patterns (or check url if you want). In manifest.json : `

"content_scripts": [
{
  "matches": ["http://www.google.com/*"], //  patterns to check url
  "css": ["mystyles.css"],
  "js": ["jquery.js", "yourScript.js"]
}]

and in yourScript.js

    $(document).keydown(function(e) {
        if (e.keyCode == 16) { 
            //send to background.js
            chrome.runtime.sendMessage({shift: 'true'}, 
                function(response) {
                    // response of background.js onMessage from this message
                });
        }
    });

and background page with background.js:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
         // you can check url sender.tab.url  ( if you set patterns is <all_urls>)
        (request.shift == 'true') && console.log("Shift Pressed");
    });
hong4rc
  • 3,999
  • 4
  • 21
  • 40