實現一個分享擴展插件,功能是從Safari網頁中截取當前網頁的圖片內容
基本的步驟總結在下面:
1.創建一個JS文件,命名爲MyJavascriptFile.js,文件的功能是解析safari網頁內容,獲取到網頁中的所有圖片節點,解析從圖片的URL,返回所有圖片URL拼接而成的字符串。
JS中主要用到run: function(arguments){}這個方法來處理抓取數據的邏輯,處理抓取到的數據調用 arguments.completionFunction({ "webImages": imageArrStr }); 這個方法把數據返回,"webImages"這個key可以自定義,在第三步的原生層OC代碼中需要用到這個key把JS層抓取到的數據取出來,然後可以對這些圖片數據進行保存、上傳等需要的操作了。
MyJavascriptFile.js文件內容
var BuscapeClass = function() {};
BuscapeClass.prototype = {
run: function(arguments) {
var imageArray = new Array();
var objs = document.getElementsByTagName("img");
for(var i=0;i<objs.length;i++){
if(imageArray.indexOf(objs[i].src) == -1){
imageArray.push(objs[i].src);
}
}
var imageArrStr = imageArray.join('+');
// Pass the baseURI of the webpage to the extension.
arguments.completionFunction({ "webImages": imageArrStr });
},
// 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"];
var bestOffer = arguments["bestOffer"];
alert("A melhor oferta é da loja\n" + bestOffer["sellername"] + " por " + bestOffer["price"]);
}
};
// The JavaScript file must contain a global object named "ExtensionPreprocessingJS".
var ExtensionPreprocessingJS = new BuscapeClass;
2.在info.plis文件中把創建的JS文件進行配置,配置如下:
配置的源碼
<key>NSExtension</key>
<dict>
<key>NSExtensionAttributes</key>
<dict>
<key>NSExtensionActivationRule</key>
<string>SUBQUERY (
extensionItems,
$extensionItem,
SUBQUERY (
$extensionItem.attachments,
$attachment,
(
ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.url"
|| ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.image"
|| ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.plain-text"
)
).@count >= $extensionItem.attachments.@count
).@count >= 1</string>
<key>NSExtensionJavaScriptPreprocessingFile</key>
<string>MyJavascriptFile</string>
</dict>
<key>NSExtensionMainStoryboard</key>
<string>MainInterface</string>
<key>NSExtensionPointIdentifier</key>
<string>com.apple.share-services</string>
</dict>
3.原生層OC代碼中處理JS抓取的數據,主要用到這兩句,把數據取出來"webImages"這個key要和JS中定義的KEY一致
NSDictionary *results = jsDict[NSExtensionJavaScriptPreprocessingResultsKey];
NSString* result = [results objectForKey:@"webImages"];
完整的處理代碼
- (void)fetchDataFromWebContent {
__weak typeof(self) weakSelf = self;
//獲取inputItems,在這裏itemProvider是你要分享的圖片
NSArray* extensionItems = self.extensionContext.inputItems;
for (NSExtensionItem *extensionItem in extensionItems) {
NSMutableArray* tmpTypeImageArr = [NSMutableArray array];
NSMutableArray* tmpTypePropertyListArr = [NSMutableArray array];
NSArray* attachments = extensionItem.attachments;
// 處理attachments
for (NSItemProvider *itemProvider in attachments) {
// 注入JS獲取圖片數據數據
if ([itemProvider hasItemConformingToTypeIdentifier:(NSString *)kUTTypePropertyList]) {
[itemProvider loadItemForTypeIdentifier:(NSString *)kUTTypePropertyList options:nil completionHandler:^(NSDictionary *jsDict, NSError *error) {
NSLog(@"jsDict: %@", jsDict);
dispatch_async(dispatch_get_main_queue(), ^{
// Get javascript result
NSDictionary *results = jsDict[NSExtensionJavaScriptPreprocessingResultsKey];
NSString* result = [results objectForKey:@"webImages"];
BMLog(@"=== webImages ===%@", result);
NSArray* tmpArr = [weakSelf handleImages:result];
if (tmpArr.count > 0) {
[tmpTypePropertyListArr addObjectsFromArray:tmpArr];
}
[weakSelf handleResult:tmpTypePropertyListArr];
});
}];
}
}
}
}
- (NSArray*)handleImages:(NSString*)imagesStr {
NSMutableArray* mUrlArray = [NSMutableArray arrayWithArray:[imagesStr componentsSeparatedByString:@"+"]];
NSMutableArray* tmpUrls = [NSMutableArray array];
for (int i = mUrlArray.count-1; i>=0; i--) {
NSString* url = mUrlArray[i];
// 過濾空的和jpg的圖像
if (![url isEmptyOrWhitespace]) {
// 在這裏處理圖片的URL
}
}
NSLog(@"mUrlArray = %@ tmpUrls = %@", mUrlArray, tmpUrls);
return tmpUrls;
}