获取URL并保存| Chrome扩展程序 [英] Get URL and save it | Chrome Extension

查看:228
本文介绍了获取URL并保存| Chrome扩展程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

基本上在我的窗口中(当你点击图标时)它应该打开并显示标签的URL并在它旁边我想要它说保存,它会将它保存到localStorage中,并显示在下面进入保存的链接区域。



像这样:

alt text http://i42.tinypic.com/dma7x5.png



类似于书签:)

如果您想要这样做,您可以轻松地使用Chrome扩展程序API来做到这一点。

要查找的区域包括:



现在,第一步是创建popup.html文件并记住它是暂时的,也就是说,它只存在于你点击浏览器动作时,然后在退出时死掉关闭)。我想说的是,如果你有很多计算,并且你希望它发生在后台,并且即使弹出窗口关闭,也会发生,将所有内容移动到后台页面。在弹出窗口中,您可以使用chrome.extension.getBackgroundPage()轻松访问后台页面。



在popup.html中,您需要获取当前标签,为此,Tab API有一个 getSelected 功能,可让您获取所选标签的标签对象



所以像这样:

popup.html

 < html> 
< body>
< p id =currentLink>正在加载...< / p>
< hr />
< ul id =savedLinks>< / ul>
< script type =text / javascriptsrc =popup.js>< / script>
< / body>
< / html>

popup.js

  chrome.tabs.getSelected(null,function(tab){
document.getElementById('currentLink')。innerHTML = tab.url;
} );

您无法在HTML文件中放置JavaScript代码的原因在于Chrome限制其保护其用户JavaScript攻击:


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

现在,您可以将当前页面的弹出窗口中的Url显示为浏览器操作。下一步是使用简单的HTML5功能,例如localStorage或Webdatabase(在我看来这会更好)。要保存已保存的页面,可以将它们渲染到savedLinks页面上,就像我为currentLink所做的一样。



祝您好运!


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.

Like this:

alt text http://i42.tinypic.com/dma7x5.png

Something like bookmarks :)

解决方案

If you want to do something like that, you easily do that with the Chrome extensions API. The areas to look for are:

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()

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.

So something like this:

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;
});

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

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.

Good Luck!

这篇关于获取URL并保存| Chrome扩展程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆