Html 获取 URL 并保存 | Chrome 扩展程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2797853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get URL and save it | Chrome Extension
提问by Jamie
Basically on my window (when you click the icon) it should open and show the URL of the tab and next to it I want it to say "Save", it will save it to the localStorage, and to be displayed below into the saved links area.
基本上在我的窗口上（当您单击图标时）它应该打开并显示选项卡的 URL，在它旁边我希望它说“保存”，它将把它保存到 localStorage，并在下面显示到保存的链接区。
Like this:
像这样：
Something like bookmarks :)
像书签之类的东西:)
回答by Mohamed Mansour
If you want to do something like that, you easily do that with the Chrome extensions API. The areas to look for are:
如果你想做这样的事情，你可以使用 Chrome 扩展 API 轻松地做到这一点。要寻找的领域是：
- Chrome Extension Tab API
- Chrome Extension Browser Action API
- HTML5 localStorageor HTML5 webdatabase
- Chrome 扩展标签 API
- Chrome 扩展浏览器操作 API
- HTML5 localStorage或 HTML5 网络数据库
Now the first step is to create your popup.html file and remember that it is transient, that is, it only lives when you click on the browser action, then dies if it exits (closes). What I am trying to say, if you have a lot of computation and you want it to happen in the background and happen even if the popup is closed, move everything to the background page. And in your popup, you can easily access the background page by using chrome.extension.getBackgroundPage()
现在第一步是创建您的 popup.html 文件并记住它是暂时的，也就是说，它仅在您单击浏览器操作时存在，然后在退出（关闭）时消失。我想说的是，如果您有大量计算并且希望它在后台发生并且即使弹出窗口关闭也会发生，请将所有内容移至后台页面。在弹出窗口中，您可以使用 chrome.extension.getBackgroundPage() 轻松访问背景页面
Within your popup.html, you would need to get the URL of the current tab, to do so, the Tab API has a "getSelected" function that allows you to get the Tab objectfor the selected Tab.
在 popup.html 中，您需要获取当前选项卡的 URL，为此，Tab API 有一个“ getSelected”函数，允许您获取所选选项卡的Tab 对象。
So something like this:
所以像这样：
popup.html
弹出窗口.html
<html>
<body>
<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
弹出窗口.js
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentLink').innerHTML = tab.url;
});
The reason why you cannot place JavaScript code in the HTML file is of Chrome's limitation to protect its users of JavaScript attacks:
不能在 HTML 文件中放置 JavaScript 代码的原因是 Chrome 保护其用户免受 JavaScript 攻击的限制：
Inline scripts and event handlers disallowed
不允许使用内联脚本和事件处理程序
Now that will allow you to show the Url in the popup for the current page as a browser action. Your next step is to use simple HTML5 features such as localStorage, or Webdatabase (in my opinion that will be better). To store the saved pages into, then you can render them on the savedLinks page same as I have done for the currentLink.
现在这将允许您在当前页面的弹出窗口中显示 URL 作为浏览器操作。您的下一步是使用简单的 HTML5 功能，例如 localStorage 或 Webdatabase（在我看来这会更好）。要将保存的页面存储到其中，然后您可以在savedLinks 页面上呈现它们，就像我对currentLink 所做的一样。
Good Luck!
祝你好运！
回答by thauburger
I wanted to update this answer, as the API has changed.
我想更新这个答案，因为 API 已经改变。
The chrome.tabs.getSelected()method is now deprecated. The recommended way of getting the URL of the current tab is to use chrome.tabs.query():
该chrome.tabs.getSelected()方法现已弃用。获取当前选项卡的 URL 的推荐方法是使用chrome.tabs.query()：
chrome.tabs.query({'active': true}, function (tabs) {
var url = tabs[0].url;
});
This still requires that you request access to the chrome.tabsAPI in your extension manifest:
这仍然需要您请求访问chrome.tabs扩展清单中的API：
"permissions": [ ...
"tabs"
]
You can read more about the deprecation here: chrome.tabs.getSelected()
您可以在此处阅读有关弃用的更多信息：chrome.tabs.getSelected()
Hope this helps!
希望这可以帮助！
回答by phoenix24
to get the current url, you need to get the current tab and then extract all the paramenters.
要获取当前 url，您需要获取当前选项卡，然后提取所有参数。
for getting the current tab use, chrome.tabs.getSelected(). Then, to fetch the parameters from the tab object, refer tabs api
用于获取当前选项卡的使用，chrome.tabs.getSelected()。然后，要从 tab 对象中获取参数，请参考tabs api
your code snippet should look like this,
你的代码片段应该是这样的，
chrome.tabs.getSelected(null, function(tab) {
//properties of tab object
tabId = tab.id;
tabUrl = tab.url;
//rest of the save functionality.
});
you'll also need to declare the "tabs" permission in your extension's manifest to use the tabs API. For example
您还需要在扩展程序清单中声明“tabs”权限才能使用 tabs API。例如
{
"name": "My extension",
...
"permissions": [
"tabs"
],
...
}
