Chrome扩展变量无法在if-else外部访问问题求助

错误原因 #

1. 变量作用域限制：你在if和else代码块内用const声明了og_image，const声明的变量仅在当前代码块（{}包裹的范围）内有效，块外无法访问，所以外部调用og_image会报未定义错误。
2. 判断条件错误：document.querySelector找不到元素时返回的是null，不是空字符串""，你的判断ogImage != ""逻辑不准确，应该直接判断元素是否存在。

修正后的代码 #

方法一：提前声明变量扩展作用域

// 在代码块外声明变量，让作用域覆盖后续逻辑
let og_image;
const ogImage = document.querySelector('meta[property="og:image"]');
if (ogImage) {
  og_image = ogImage.content;
} else {
  og_image = "https://i.imgur.com/vvMtZvn.jpg";
};

console.log(og_image);

方法二：用三元运算符简化代码

const ogImage = document.querySelector('meta[property="og:image"]');
const og_image = ogImage ? ogImage.content : "https://i.imgur.com/vvMtZvn.jpg";

console.log(og_image);

说明 #

• 用let在块外声明变量，可确保赋值后外部代码能正常访问该变量。
• 直接用if(ogImage)判断元素是否存在，因为null在布尔判断中会被视为false，逻辑更准确。
• 三元运算符写法能在一行内完成判断与赋值，让代码更简洁紧凑。

内容的提问来源于stack exchange，提问作者Jeff