获取网址并保存 |Chrome 扩展程序 [英] Get URL and save it | Chrome Extension
问题描述
基本上在我的窗口上(当您单击图标时)它应该打开并显示选项卡的 URL，在它旁边我希望它说保存"，它将把它保存到 localStorage，并显示在下面进入保存的链接区域.
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.
像这样:
类似于书签的东西:)
推荐答案
如果您想做类似的事情，可以使用 Chrome 扩展 API 轻松实现.要查找的区域是:
If you want to do something like that, you easily do that with the Chrome extensions API. The areas to look for are:
- Chrome 扩展程序 Tab API
- Chrome 扩展程序 浏览器操作 API
- HTML5 localStorage 或 HTML5 网络数据库
- Chrome Extension Tab API
- Chrome Extension Browser Action API
- HTML5 localStorage or HTML5 webdatabase
现在第一步是创建您的 popup.html 文件并记住它是暂时的，也就是说，它只在您单击浏览器操作时存在，然后在退出(关闭)时消失.我想说的是，如果您有大量计算并且希望它在后台发生并且即使弹出窗口关闭也会发生，请将所有内容移至 背景页面.在弹出窗口中，您可以使用 chrome.extension.getBackgroundPage()
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 中，您需要获取当前选项卡的 URL，为此，Tab API 有一个getSelected" 函数，允许您获取 Tab 对象 用于选定的 Tab.
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 object for the selected Tab.
就像这样:
popup.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
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentLink').innerHTML = tab.url;
});
不能在 HTML 文件中放置 JavaScript 代码的原因是 Chrome 保护其用户免受 JavaScript 攻击的限制:
The reason why you cannot place JavaScript code in the HTML file is of Chrome's limitation to protect its users of JavaScript attacks:
不允许使用内联脚本和事件处理程序
Inline scripts and event handlers disallowed
现在这将允许您在当前页面的弹出窗口中显示 URL 作为浏览器操作.您的下一步是使用简单的 HTML5 功能，例如 localStorage 或 Webdatabase(在我看来这会更好).要将保存的页面存储到其中，然后您可以在savedLinks 页面上呈现它们，就像我对currentLink 所做的一样.
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.
祝你好运！
这篇关于获取网址并保存 |Chrome 扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
