4

I want to access webpage properties (Title, Meta - description, URL, default image, etc) when user opens Share extension on iOS using javascript file. I am using the following code for javascript (https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/ExtensibilityPG/ExtensionScenarios.html#//apple_ref/doc/uid/TP40014214-CH21-SW12):

    var MyExtensionJavaScriptClass = function() {};

MyExtensionJavaScriptClass.prototype = {
    run: function(arguments) {
    // Pass the baseURI of the webpage to the extension.
        arguments.completionFunction({"url": document.baseURI});
        arguments.completionFunction({"host": getHost()});
        arguments.completionFunction({"title": document.title});
        arguments.completionFunction({"description": getDescription()});
        arguments.completionFunction({"image": getImage()});
    },
    getHost: function() {
        var l = document.createElement("a");
        l.href = href;
        return l.hostname;
    },
    getDescription: function() {
        var metas = document.getElementsByTagName('meta'); 

       for (i=0; i<metas.length; i++) { 
          if (metas[i].getAttribute("property") == "description") { 
             return metas[i].getAttribute("content"); 
          } 
       } 
        return "";
    },
    getImage: function() {
        // Need to find this out
        return "";
    },
// Note that the finalize function is only available in iOS.
    finalize: function(arguments) {
        // arguments contains the value the extension provides in [NSExtensionContext completeRequestReturningItems:completion:].
    // In this example, the extension provides a color as a returning item.
    document.body.style.backgroundColor = arguments["bgColor"];
    }
};

// The JavaScript file must contain a global object named "ExtensionPreprocessingJS".
var ExtensionPreprocessingJS = new MyExtensionJavaScriptClass;

Is this the right way to access Web page properties also what's the best way to fetch the first image in the content.

Any help would be much appreciated.

Purusottam
  • 611
  • 6
  • 19

1 Answers1

11

Here is how i solved this problem.

JS Code:

var MyExtensionJavaScriptClass = function() {};

MyExtensionJavaScriptClass.prototype = {
    getDescription: function() {
        var metas = document.getElementsByTagName('meta'); 
        for (i=0; i<metas.length; i++) { 
            if (metas[i].getAttribute("name") == "description") { 
                return metas[i].getAttribute("content"); 
            }
        }
        return "";
    },
    getImage: function() {
        var metas = document.getElementsByTagName('meta'); 
        for (i=0; i<metas.length; i++) { 
            if (metas[i].getAttribute("name") == "og:image" || metas[i].getAttribute("name") == "sailthru.image.full" || metas[i].getAttribute("name") == "twitter:image:src") { 
                return metas[i].getAttribute("content"); 
            }
        }
        return "";
    },
    run: function(arguments) {
    // Pass the baseURI of the webpage to the extension.
        arguments.completionFunction({"url": document.baseURI, "host": document.location.hostname, "title": document.title, "description": this.getDescription(), "image": this.getImage()});
    },
// Note that the finalize function is only available in iOS.
    finalize: function(arguments) {
        // arguments contains the value the extension provides in [NSExtensionContext completeRequestReturningItems:completion:].
    // In this example, the extension provides a color as a returning item.
    // document.body.style.backgroundColor = arguments["bgColor"];
    }
};

// The JavaScript file must contain a global object named "ExtensionPreprocessingJS".
var ExtensionPreprocessingJS = new MyExtensionJavaScriptClass;

// ExtensionPreprocessingJS.test();

Swift Code:

for item: AnyObject in (self.extensionContext?.inputItems)! {
    let inputItem = item as! NSExtensionItem

    for provider: AnyObject in inputItem.attachments! {
        let itemProvider = provider as! NSItemProvider

        if itemProvider.hasItemConformingToTypeIdentifier(kUTTypePropertyList as String) {
            itemProvider.loadItemForTypeIdentifier(kUTTypePropertyList as String, options: nil, completionHandler: { (result: NSSecureCoding?, error: NSError!) -> Void in
                if let resultDict = result as? NSDictionary {
                    self.articleTitle = resultDict[NSExtensionJavaScriptPreprocessingResultsKey]!["title"] as! String
                    self.articleHost = resultDict[NSExtensionJavaScriptPreprocessingResultsKey]!["host"] as! String
                    self.articleDesc = resultDict[NSExtensionJavaScriptPreprocessingResultsKey]!["description"] as! String
                    self.articleImage = resultDict[NSExtensionJavaScriptPreprocessingResultsKey]!["image"] as! String
                    self.articleUrl = resultDict[NSExtensionJavaScriptPreprocessingResultsKey]!["url"] as! String
                }
            })
        }
    }
}
Purusottam
  • 611
  • 6
  • 19
  • I mean metas[i].getAttribute("name") == "og:image" is not returning image. – Asadullah Ali Jan 25 '16 at 18:04
  • @AsadullahAli The objective of the condition is to check if open graph tags or sailthru or twitter cards are integrated in the URL. If the tags are present, fetch the image. This code might need some update based on the URL that you are testing. Can you share the URL that you are testing? – Purusottam Jan 27 '16 at 01:42
  • Yes please check this http://tribune.com.pk/story/1034882/external-debt-may-swell-to-70-billion-by-year-end/ – Asadullah Ali Jan 27 '16 at 17:41
  • This is the meta image tag. It has "property" instead of "name". I changed the metas[i].getAttribute("name") to metas[i].getAttribute("property"). And it has given me an image link FINALLY . Thanks – Asadullah Ali Jan 27 '16 at 17:43
  • glad that you got the solution. – Purusottam Jan 29 '16 at 01:13
  • Thanks Puru : - ) This tag returns a link to the image. Is there a way we can get actual image from the webpage ? – Asadullah Ali Jan 29 '16 at 17:57