Chrome extension to redirect tab to my page

问题

I am new to chrome extensions and I am having trouble while writing my first extension for chrome. What I am trying to do is detect the new tab action and redirect to a pre-defined(my webpage) url.

I wrote the manifest.json and the background.html but it doesn't seem to work. I went through the google papers on the functions and how to use them, but there must be something I've missed.

I do not understand quite a few things that I've done in here, for example the content-scripts in manifest.json.

Some help in fixing this would be appreciated.

EDIT

EDIT2 Here is the updated code Now I don't have the background.html file. manifest.json

{
  "name": "Tabber",
  "manifest_version" : 2,
  "version": "1.0",
  "description": "MyExtension",
  "background" : {
    "scripts": ["code.js"]
  },
  "chrome_url_overrides": {
      "newtab": "code.js"
   },
  "permissions": [
    "tabs"
  ]
}

code.js

<script>
    chrome.browserAction.onClicked.addListener(function(tab){
            var action_url = "www.xyz.com"
            chrome.tabs.create({ url: action_url });
    }
</script>

Now when I open a new tab, I get to see the source of the .js file displayed. Screenshot:

Why isn't the script being executed ?

回答1:

If you want to over ride a default page, you shoud use html file, not a js file. And if you just want to over ride a page, you do not need any background page or content script. Here is the sample code:

menifest.json:

{
    "name": "Tabber",
    "manifest_version" : 2,
    "version": "1.0",
    "description": "MyExtension",
    "chrome_url_overrides": {
        "newtab": "my.html"
    },
    "permissions": [
        "tabs"
    ]
}

my.html:

<!DOCTYPE html>
<html>
<head>
    <title>over ride page</title>   
    <script type="text/javascript" src="code.js">
    </script>
</head>
<body>    
</body>
</html>

code.js:

window.open("http://www.google.com", "_self");

Note: you can not write any js in your html file. You need to include js file in html file.

And, you even do not need any js file. just modify the my.html as this:

<head>
    <meta http-equiv="refresh"content="0;URL=http://www.google.com">
</head>

回答2:

With the new chrome extensions you should not put any script code in the background page.

Inline scripts and event handlers disallowed

Due to the use of Content Security Policy, you can no longer use tags that are inline with the HTML content. These must be moved to external JS files. In addition, inline event handlers are also not supported. For example, suppose you had the following code in your extension:

https://developer.chrome.com/extensions/tut_migration_to_manifest_v2.html#inline_scripts

What you should do is move your code to a js file, either set the manifest background property to a js file or have a background page that links to an external js file and put all you js code there...

Try using the background property: http://developer.chrome.com/extensions/background_pages.html

1)basically add to your manifest a background script (you do not need the background page for your extension right now)

background : {
"scripts": ["background.js"]
}

2) Then add a a background.js to your extension directory and put all your js code there..

Then try again, and see if the extension works :)

3) remove all html from the js file and put just you js in the background.js

chrome.browserAction.onClicked.addListener(function(tab){
            var action_url = "www.xyz.com"
            chrome.tabs.create({ url: action_url });
    }

回答3:

Add this guy to your manifest.json file.

"chrome_url_overrides": {
      "newtab": "index.html"
   }

with index.html being replaced with your page. This will make it so it will show index.html when you open a new tab instead of the default.

I have an extension that basically does the same thing. Here's my manifest.json that you can use as a reference.

{
  "name": "appName",
  "version": "0.1",
  "manifest_version": 2,
  "chrome_url_overrides": {
      "newtab": "index.html"
   },

  "description": "Desc Here",
  "icons": {
    // "128": "icon128.png"
  },
  "content_scripts": [ {
  "css": ["css/styles.css"],
  "js": [ ],
  "matches": [ "*://*/*" ],
  "run_at": "document_start"
  } ],
  "minimum_chrome_version": "18",
  "permissions": [ "http://*/*", "https://*/*", "cookies", "tabs", "notifications" ]

}

来源：https://stackoverflow.com/questions/21656100/chrome-extension-to-redirect-tab-to-my-page

标签

javascript

json

google-chrome

google-chrome-extension