特定帧加载后显示通知

时间:2017-01-04 17:33:51

标签: javascript google-chrome-extension

我正在创建一个Google扩展程序,该扩展程序会在我们公司的基于网络的申请人跟踪系统中加载特定框架后立即显示简单的文字通知。

点击网页上的特定按钮后,通过JavaScript加载框架:

<a href="javascript:void(0)" onclick="formletter();;TrackActionClick(7516);return false;" class="actionIcon icon-med icon-highlight MailAction icon-Mail" title="Letter"></a>

这是我尝试触发通知的框架的网址:https://www2.pcrecruiter.net/pcrbin/bmail.exe

单击按钮并加载框架后,我无法收到显示通知(当前没有任何操作)。

的manifest.json

{
    "manifest_version": 2,

    "name": "Bulk Email Reminder",
    "description": "This extension provides a reminder for AE's to use SparkPost when sending a bulk email",
    "version": "1.0",
    "icons": {
        "16": "logo.png"
    },

    "permissions": [
    "notifications"
    ],

    "content_scripts": [
        {
            "matches": ["*://*.pcrecruiter.net/pcrbin/bmail.exe"],
            "match_about_blank": true,
            "js": ["myscript.js"]
        }
    ]
}

myscript.js

// Create a simple text notification:
var notification = webkitNotifications.createNotification(
    'Hello!', // notification title
    'Lorem ipsum...' // notification body text
);

// Then show the notification.
notification.show();

1 个答案:

答案 0 :(得分:0)

检测后台脚本中的导航,而不是通过内容脚本

您没有操纵网页的内容。您只是使用内容脚本的加载来检测帧中是否正在加载特定的URL。因此,最好直接在后台脚本中检测到帧中已加载了匹配的URL。您可以使用chrome.webNavigation.onCompleted事件执行此操作,该事件可以是filtered for specific URLs,因此您只能获取匹配网址的事件。

要生成通知,您可以使用chrome.notifications

后台脚本仅侦听事件,因此它可以是Event Page

为此,您的扩展程序可能如下所示:

的manifest.json

{
    "manifest_version": 2,
    "name": "Bulk Email Reminder",
    "description": "This extension provides a reminder for AE's to use SparkPost when sending a bulk email",
    "version": "1.0",
    "icons": {
        "16": "logo.png"
    },
    "permissions": [
        "notifications",
        "webNavigation"
    ],
    "background":{
        "scripts":[
            "background.js"
        ],
        "persistent": false
    }
}

background.js

chrome.webNavigation.onCompleted.addListener(function(details){
    //You can check that details.frameId !== 0 if you only want to
    //  notify when in an iframe and *not* when loaded as the main frame.
    if(details.frameId !==0){
        //This is not the base frame (i.e. it is in an iframe)
        let options =  {
            type:'basic',
            iconUrl:'logo.png',
            title:'Hello!',
            message:'Lorem ipsum...'
        }
        chrome.notifications.create(options);
    }
}, {
    url: [    
        {urlMatches: '^[^:]*:(?://)?(?:[^/]*\\.)?pcrecruiter.net/pcrbin/bmail\\.exe$'}
        //,{urlMatches: '^[^:]*:(?://)?(?:[^/]*\\.)?' + 'example.com' + '/.*$'} //for testing
    ]
});

注意:使用URL过滤会很麻烦。在不使用正则表达式的情况下,没有好的方法来匹配域和所有子域(包含或不包含文件),同时确保不匹配欺骗所需URL的URL。因此,我倾向于使用urlMatches正则表达式,该表达式最终只匹配您想要的URL。

将内容脚本加载到iframe

如果您实际上要操纵iframe的内容或从中获取数据,那么您实际上想要将内容脚本加载到iframe中。您可能希望使用此方法的另一个原因是它将向用户显示不同的permissions warning。使用webNavigation可能会导致用户收到有关扩展程序可以访问的警告:&#34;访问您的浏览活动&#34;。使用内容脚本只会通知您已指定为内容脚本的匹配URL的特定网站。

如果您希望将内容脚本加载到iframe中,则需要在"all_frames": true manifest.json条目中指定content_scripts

在这种情况下,您不希望匹配空白帧,因此"match_about_blank": true,不合适。

此外,webkitNotifications已弃用,并且不久前已从Chrome中删除。鉴于您正在编写Chrome扩展程序,最好使用chrome.notifications。但是,chrome.notifications不是内容脚本可用的API。因此,您需要有一个后台脚本,您可以使用chrome.runtime.sendMessage()从内容脚本向其发送消息,指示它使用chrome.notifications.create()创建通知。鉴于您的后台脚本仅处理事件(消息),它可以是Event Page

因此,您的扩展程序可能如下所示:

的manifest.json

{
    "manifest_version": 2,
    "name": "Bulk Email Reminder",
    "description": "This extension provides a reminder for AE's to use SparkPost when sending a bulk email",
    "version": "1.0",
    "icons": {
        "16": "logo.png"
    },

    "permissions": [
        "notifications"
    ],

    "content_scripts": [
        {
            "matches": ["*://*.pcrecruiter.net/pcrbin/bmail.exe"],
            "all_frames": true,
            "js": ["myscript.js"]
        }
    ]
}

background.js

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    if(message.type === 'createNotification'){
        chrome.notifications.create(message.id,message.options);
    }
});

myscript.js

chrome.runtime.sendMessage({
    type:'createNotification',
    //id: '', //You do not need to specify this, but can if desired
    options: {
        type:'basic',
        iconUrl:'logo.png',
        title:'Hello!',
        message:'Lorem ipsum...'
    }
});