将标签重定向到我的页面的 Chrome 扩展答案

【问题标题】：Chrome extension to redirect tab to my page将标签重定向到我的页面的 Chrome 扩展
【发布时间】：2014-03-06 12:55:18
【问题描述】：

我是 chrome 扩展程序的新手，在编写我的第一个 chrome 扩展程序时遇到了麻烦。我正在尝试做的是检测新标签操作并重定向到预定义的（我的网页）网址。

我编写了 manifest.json 和 background.html，但它似乎不起作用。我浏览了有关功能以及如何使用它们的谷歌论文，但一定有一些我错过了。

我不明白我在这里所做的很多事情，例如 manifest.json 中的内容脚本。

我们将不胜感激。

编辑

EDIT2 这是更新的代码现在我没有 background.html 文件。 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>

现在，当我打开一个新选项卡时，我可以看到所显示的 .js 文件的源代码。截屏：

为什么脚本没有被执行？

【问题讨论】：

发帖前请先搜索。这是类似的问题：stackoverflow.com/questions/3743072/chrome-new-tab-event
阅读我的答案，你需要 html 文件，而不是 js。

标签： javascript json google-chrome google-chrome-extension

【解决方案1】：

如果你想覆盖默认页面，你应该使用 html 文件，而不是 js 文件。如果你只是想覆盖一个页面，你不需要任何背景页面或内容脚本。下面是示例代码：

menifest.json：

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

我的.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");

注意：你不能在你的html文件中写任何js。您需要在 html 文件中包含 js 文件。

而且，你甚至不需要任何 js 文件。只需将 my.html 修改为：

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

【讨论】：

祝福你分享这个......正在阅读所有（最近的）关于executeScript如何不再在新标签中工作的文档......这拯救了一天。

【解决方案2】：

使用新的 chrome 扩展，您不应在后台页面中放置任何脚本代码。

不允许内联脚本和事件处理程序

由于使用了内容安全策略，您不能再使用与 HTML 内容内联的标签。这些必须移动到外部 JS 文件。此外，内联事件处理程序是也不支持。例如，假设您有以下代码你的扩展：

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

你应该做的是将你的代码移动到一个 js 文件中，或者设置将背景属性显示到 js 文件或具有背景页面链接到外部 js 文件并将所有 js 代码放在那里...

尝试使用背景属性：http://developer.chrome.com/extensions/background_pages.html

1) 基本上在你的清单中添加一个后台脚本（你现在不需要你的扩展的背景页面）

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

2) 然后在你的扩展目录中添加一个 background.js 并将你所有的 js 代码放在那里..

然后再试一次，看看扩展是否有效:)

3) 从 js 文件中删除所有 html 并将你的 js 放在 background.js 中

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

【讨论】：

做到了，现在当我打开一个新选项卡时，我得到了 .js 文件的内容。我哪里做错了？
内容？你什么意思？
从background.js中移除html，在js文件中加入如下内容：
?? javascript 代码显示在新选项卡中，而不是加载网页。 .js 文件中有这么个html。检查主帖中的 edit2。
删除所有的html，只把js代码放在后台页面，看看我对答案所做的编辑？

【解决方案3】：

将此人添加到您的 manifest.json 文件中。

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

将 index.html 替换为您的页面。这将使它在您打开新选项卡而不是默认选项卡时显示 index.html。

我有一个基本上做同样事情的扩展。这是我的 manifest.json，您可以用作参考。

{
  "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" ]

}

【讨论】：

老实说，我对 manifest.json 的东西知之甚少，但我确实知道一个扩展，我刚刚写了一个扩展，就像你想要的那样工作，所以我把它贴出来供你参考。您可能只需要像我一样将您的 JS 和 CSS 文件分开并更新您的内容脚本部分。
它会导致同样的问题:(
几年后，这就是我一直在寻找的答案，没有人立即浏览所有文档，感谢您为我指明正确的方向@TylerMcGinnis，我想将用户重定向到我的自定义 Web 应用程序每当他们创建一个新选项卡时，我使用 chrome.tabs.onCreated，但它与工作不一致，所以我在覆盖的 html 中只使用了一行 js。
很高兴 2014 年我可以帮助你 @HasinthaAbeykoon！