Question

我想创建一个Chrome扩展程序，其浏览器操作onClicked提供与以下书签相同的功能：

javascript:(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();

但是，我很难正确地将书签的javascript代码转换为Chrome扩展程序的逻辑。我认为最好的方法是将书签的确切代码放入单独的脚本create_feed_url.js并在background.js中执行。我的background.js：

chrome.browserAction.onClicked.addListener(function(tab) {
    // Run the bookmark code
    chrome.tabs.executeScript(null, {file: "create_feed_url.js"});

    // Open a new tab for a valid url resulting from create_feed_url.js
    var feed_url = "http://page2rss.com/page?url=" + tab.url;
    chrome.tabs.create({"url": feed_url});

然而create_feed_url.js中的代码有些不成功。没有生成供稿网址，导致feed_url的现有值不存在。

我的问题：

您能不能帮助我找出为什么我不能将书签的代码放入create_feed_url.js并运行它？
这种方法executeScript在我的情况下是否值得推荐，还是有更好的方式将书签翻译成扩展名？

Answer 1

我解决了这个问题，解决方法是在关闭它之前调用在新选项卡中生成新Feed的URL，最后跳转到带有最终RSS提要URL的选项卡。此解决方案不需要create_feed_url.js，但完全依赖于background.js：

chrome.browserAction.onClicked.addListener(function(tab) {
    // Original bookmark JS code
    //(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='http://page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();

    var create_feed_url = "http://page2rss.com/api/page?url=" + encodeURIComponent(tab.url); //+ "&callback=page2rss_bookmark_urlr" 
    var feed_url = "http://page2rss.com/page?url=" + tab.url;

    chrome.tabs.create({"url": create_feed_url, active: false}, function(tab) {
        chrome.browserAction.setBadgeText({text: 'wait'});
        setTimeout(function() { 
            chrome.tabs.remove(tab.id, function(tab) {
                chrome.browserAction.setBadgeText({text: ''});
            }); 

        }, 5000);
    });

    setTimeout(function() { 
        chrome.tabs.create({"url": feed_url, active: true}, function(tab) {
            chrome.tabs.onUpdated.addListener(function( tabId , info ) {
                if ( info.status == "complete" ) {
                    chrome.browserAction.setBadgeText({text: 'done', tabId: tabId});
                }
            });
        }); }
    , 1000);    
});

Answer 2

基于Rob上面关于使用内容脚本方法的评论，我试图实现它。但是，单击浏览器图标不会触发内容脚本create_feed_url.js到content_script.js。我尝试调试代码，但Developer Tools和inspect element工具都没有显示任何错误。

background.js：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {file: "content_script.js"});
});

content_script.js：

var s = document.createElement('script');
s.src = chrome.extension.getURL("create_feed_url.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

create_feed_url.js：

(function(){if(!window.page2rss_bookmark_urlr)window.page2rss_bookmark_urlr=function(ur){if(ur.error)alert(ur.error);if(ur.page&&ur.page.page)location.href=ur.page.page};var r=document.getElementById('urlFormRequest');if(r)r.parentNode.removeChild(r);r=document.createElement('script');r.id='urlFormRequest';r.type='text/javascript';r.src='//page2rss.com/api/page?url='+encodeURIComponent(location.href)+'&callback=page2rss_bookmark_urlr';document.body.appendChild(r);})();

manifest.json：

{
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "background" : {
    "scripts": ["background.js"],
    "persistent": false
  },
  "web_accessible_resources": ["create_feed_url.js"],
  "browser_action" :
  {
    "default_icon" : "rss-19.png",
    "default_title" : "Create RSS feed for this page"
  },
  "manifest_version": 2
}

将JavaScript书签翻译为Chrome浏览器操作扩展程序

2 个答案: